I’m using the date picker preset to allow my users to select multiple dates for their event listing. When my users go to edit the dates for their event, however, it seems that the initial values for the date array completely overrides any changes made client-side, meaning that they are unable to edit their dates. This doesn’t seem to be an issue for single dates and date ranges. Is there a fix for this?
Here’s a video of it in action below:
https://drive.google.com/file/d/1UAnjQkcrmnouEy07UxGm85sirU427h0C/view?usp=sharing
I’m not sure if the way I’ve built mine is best practice, and I’ve only used the “range” within the date selector as opposed to “multi-select” but hopefully this is enough to help.
When I select a start and end date, the event makes those variables available in the workflows. I take those variables and store them as local variables (today I’d create an object with a ‘start’ and 'end" key to keep things cleaner). These variables are passed to collections to filter data respectively. I also use those local variables to set the initial value so that the date selector retains the last known selection.
–
Following the way I’ve done it, I would create a local variable of type array (mine is called test_multi_dates) > store those selected dates in an the array. In the screenshot below, I’ve created a workflow On change which “replaces all items” in the test_multi_dates array (I can’t explain why I chose to replace all, but it seems to work here) with the values coming in from the Event (also can’t explain these values, but in the “range” I use in my project it passes start and end date)
I notice in your video you have your calendar in a popover of sorts > you change the dates > and then click outside of it to close. In order for this to work, I’d assume you have “auto apply:on” otherwise how else are you telling the system to store your changes. In addition to turning auto apply on, set the initial value of the date selector to the array of dates we created above. See screenshot below for reference.
Tying this all together, each time you click a date in the date selector, the array should get auto updated respectively (add/remove). Then by setting the initial value, you ensure the date selector is always referencing the last known dates selected.
I figured out my issue. I had a min date constraint on the date array (to today’s date), so because the arrays sometimes contain dates in the past, the auto apply feature was not working. Turning it off allowed me to update even without a local variable. Thank you so much for your help nonetheless!
1 Like