I can't set the value of a dateRange picker. Is that correct?

Wappler General
#1

Hey All,

I can;'t seem to set the value of a date range picker…i.e. on form reset change the value…or on button click change the value.

In the UI it does not have that option:
image

In the code i’ve tried a variety of different options/syntax to try and set the value or even start/end values but nothing has worked.

Am i missing something here?

Seems a decent size bug if you can’t dynamically set the value of a date range input, especially because resetting a form only resets the visual date and not the value in the actual input.

Help needed please :slight_smile: Hoping its just me

#2

Have you tried dmx bindings under Dynamic Attributes -> Date Picker -> Start Date & End Date options to set default values? I added the Date Range Picker input field and Date and Time component on the page for the code below. The code displays a range between current date and current date + 7 days.

<input id="date1" name="date1" is="dmx-date-range-picker" dmx-bind:startdate="currentdatetime.datetime" dmx-bind:enddate="currentdatetime.datetime.addDays(7)">
#3

Thanks for your response.

Yes, setting dynamic attributes is no problem. I have them set and working accordingly.

The issue is when I want to set the values based of a dynamic event from another event such as a button click or on form reset.

#4

You’re right, there’s no direct method to set the date values in the date range picker on another dynamic event.

An alternative I have found is to setup two variable. On the button click, set values for these variables: say current time for var1 and current time + 1 day for var2 and then bind these var values to the date range picker input. I’m sure there will be other ways to achieve this as well.

#5

Just had a use case for this, and was able to make it work.
The picker still doesn’t show the option to set value (as of 5.8.2), but you can do it via code.
The syntax is to provide both start and end dates, comma separated - in the setValue function.

dateRangePicker1.setValue('2023-11-01', '2023-11-28')
1 Like
#6

I’m needing this as well, I just used two variables, one for start date and one for end date bound to them:

dmx-bind:startdate="varStartDate.value" dmx-bind:enddate="varEndDate.value"