104
Views
1
Comments
Solved
[OutSystems UI] Configuring "Date Picker Range" to Accept a Single Date Selection
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hello!

I am working on a Reactive application and have been integrating the "Date Picker Range" component into a form where users need the flexibility to select either a single date or a date range. I've noticed that double-clicking on a day selects that day as a single date. However, when I try to submit the form after selecting just one date, I encounter an error message saying "enter a valid date." (which comes from the built-in validation errors and not from my custom validations)

Here are some specific questions and details about my scenario:

  1. Can the "Date Picker Range" component be configured to accept either a single date or a date range without throwing validation errors? If so, what adjustments need to be made to the component's settings or properties?
  2. I observed that removing built-in validations allows the form to be submitted, but then I face issues when revalidating the form. Has anyone encountered similar issues or found effective solutions for handling this?

Any advice or insights on how to manage this configuration would be greatly appreciated. Thank you for your support and looking forward to your suggestions.

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Andrea Caselli 

To make this more collaborative and to make sure the community is looking into the same use case that you're reporting, please share a sample oml where that can be reproduced (include a GIF/video if it's easier to showcase the steps to reproduce) - this is particularly useful for 2) on your questions even because forms validation is something on the developer's side.

For 1) even though is not something tested or something that will be offered/supported out of the box, you can try to use extensibility to achieve that.
For that in the initialize event handler of your date picker add the following JS node. 


The problem is that the output of this component is prepared to return a single date so it won't work as expected. 
So you need to attach an event like the onchange (using SetFlatpickrEvent client action) or what suits better your use case from the one available at flatpickr.

Something like:

  • Create a client action that will handle your date range as a JSON
  • Use SetFlatpickrEvent client action to add the function that will handle the date selection
  • Finally, to take proper care of the page lifecycle, create an on-destroy handler to unset the event that was added, by calling UnsetFlatpickrEvent

And that's it!

Notes:

  • Some extra-careful needs to be taken into account since events like the one responsible for the selection will still be triggered and (didn't get the time to understand why) the onchange is triggering twice, but that's something you can handle on your own.
  • This is a highly customized use case that is not supported by the official channels so, all issues are the responsibility of the developer implementing it.

Hope it helps.

Cheers,
GM

DatePicker_Extensibility.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.