Date range picker showing undefined

Just want to make sure all the components are included and the input is set up correctly. When choosing dates, they are entered into the input as “undefined”. I’ve tried auto apply on and auto apply off. with same results.

I thought maybe the on change or value bind may be messing with it so I removed them but still get undefined.

Any help would be greatly appreciated.

Thanks in advance,
Twitch

Please paste your input code here instead of posting a screenshot of it.

Sorry, here ya go.

<input id="search_orders_s_time_purchased" name="orders_s_time_purchased" type="search" class="form-control form-control-sm" dmx-bind:value="query.orders_s_time_purchased" dmx-on:changed="run([{run:{action:`flowPrepareEzphpzSearch.run()`}},{condition:{if:`(value!=\'\')`,then:{steps:{run:{action:`qmGlobal.set(\'orders_s_time_purchased\',value)`}}},else:{steps:{run:{action:`qmGlobal.remove(\'orders_s_time_purchased\')`}}}}}])" is="dmx-date-range-picker" format="M/d/YYYY" autoapply="true" showdropdowns="true">

Your date format is wrong. It should be M/D/YYYY (capital D)

Thank you @Teodor. I should have known it was something simple. :man_facepalming: Working properly now, imagine that. :crazy_face:

Got everything working with the date range picker, including in the query, except, the value isn’t showing in the search field if I refresh the page even though the value is bound to query.orders_s_time_purchased which is in the url. I notice that the value is sent to the $_GET var with a backslash / between the two dates. I split that value on the server side to get the start and end dates, do I need to manipulate the query.orders_s_time_purchased value for it to appear correctly in the date range picker search field?

<input id="search_orders_s_time_purchased" name="orders_s_time_purchased" type="search" class="form-control form-control-sm" dmx-bind:value="query.orders_s_time_purchased" dmx-on:updated="run([{run:{action:`flowPrepareEzphpzSearch.run()`}},{condition:{if:`(value!=\'\')`,then:{steps:{run:{action:`qmGlobal.set(\'orders_s_time_purchased\',value)`}}},else:{steps:{run:{action:`qmGlobal.remove(\'orders_s_time_purchased\')`}}}}}])" is="dmx-date-range-picker" autoapply="true" showdropdowns="true">

Sorry for all the trouble, I just have to have this simple app ready to show the client by mid week.

Thanks again,
Twitch

bump

You can’t directly bind the value like this.
Date range picker has start and end date. These are available under dynamic attributes, so when you add start date, you need to split the url param by / and take the first value. For the end date you again split the url param by / but take the second value.

So instead of:

dmx-bind:value="query.orders_s_time_purchased"

You need:

dmx-bind:startdate="query.orders_s_time_purchased.split('/')[0]" dmx-bind:enddate="query.orders_s_time_purchased.split('/')[1]"
3 Likes

Awesome I’ll work on that when I get a chance. Thanks as always @Teodor.