DatePicker - Reset Selected Dates within Widget using Client Action
Question
Application Type
Reactive

I'm using the DatePicker for selecting the Date Intervals. It is working fine. There is a button to Reset the form inputs. Once the user clicks it, the local variable associated are cleared. It is working fine. But when the user tries to select the new dates after clicking the Reset, the DatePicker shows the previous selected date interval. 

Is there a way to clear/refresh the DatePicker widget and make the widget without any dates selected during the Reset action on the screen, with any client action/Javascript?

First the page is loaded - datepicker default selected current date and input not entered

I make a selection of Feb 1 to Feb 5 on the datepicker and it gets assigned to the related input fields

Now, I have clicked the reset button on the form, and it cleared the input fields., but when I try to select the dates on date picker., it still shows me the previous selected date range. 

Ideally this should be current date and should look like the first screenshot. 

I don't see any way to refresh/clear the selected dates within the date picker. Is there a way to clear the cache/reset the date picker widget itself during the Reset client action when clearing the local variables? If it's a Traditional, we can use Ajax Refresh and pass the widget id to reset. Not sure how to proceed similar on in React. Thanks in Advance!

Solution

Hello @Somesh Renganathan

I have confirmed your observation as well. The only way I was able to truly reset the date picker and clear the previously selected dates was to replace the 'End' widget in the Reset client action, to instead load the current screen as the Destination. Screenshot below.

Just wanted to share it right away in case it is a feasible option for you. Meanwhile I will continue to dig deeper into the property settings just out of curiosity as I have not used the date picker's Interval feature before. 

Hope this helps!

AJ

Hi again @Somesh Renganathan,

Assigning default values to the various properties does not help clear the selections (at the time of this post) so I managed to clear the selections using Javascript in the Reset action. I have attached the oml.

This is merely a work around I must say, because, if you navigate to a different month and return, then the selections are displayed again. Screenshot below:


If the work around works for you great! If you have found a better solution please do share. 

Alternatively you might want to consider this forge component. I have not used it but came across it as a recommendation in the forums - https://www.outsystems.com/forge/component-overview/2252/daterangepicker

Regards,

AJ

DemoReactiveDateIntervalPicker.oml

Hi AJ,

Thanks for your extended support! I fixed it by replacing End with Current Screen. Ideally, the reset button was doing the same thing, except refreshing the screen. It fixed the problem. Thanks once again.

I believe, the Default Date Picker should be optimized as this seems to be a bug. Hope the product team fixes this in upcoming versions.

Thanks,

Somesh

Hi somesh,

Have you tried of assigning default value to date input field? Or min and max range of date picker?

May that work ,

Kind regards,

Hi somesh, 

Try to assign date range variables to current date when you click reset 

Hi Somesh,

One way to achieve this, by changing the input parameters. It will reinitialize the calendar object. 

if possible, Check or reassign the input variable of date picker. 

All you have to try is to call clear method of calendar pika obj.


hope it may help you!!


Cheers!!!

Ali Amin

Hello @Ali Amin 

I have been able to reproduce the issue @Somesh Renganathan was getting and spent quite some time on it. None of the suggested options related to resetting input values or the 'StartDate' and 'EndDate' inputs to the datepicker itself, seem to be working for some reason. 

Your suggestion to call the clear method of the pika calender object is the one I would like to try out. Could you please share the actual code for this i.e. is it javascript code or otherwise? 

Thank you!

AJ

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