15
Views
6
Comments
Solved
[OutSystems UI] Issue on the Date Picker event OnselectDate and Apply Screen Action running assyn.
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Greetings everyone! 

Here is a scenario , 


When a user selects a date, hour, or second using the date picker and clicks the Apply button without closing the picker, the last selected field may not be applied correctly. This issue occurs because the OnSelect event and the Apply action run asynchronously (will cause the assignment of local variable on Onselect not yet finish as the Apply action executed).

As a workaround, we encapsulated the Apply button’s logic within JavaScript. This script triggers the actual filtering with a slight delay, allowing enough time for the OnSelect event to complete its variable assignment before the filter is applied.

The question, is there any other way better than this to handle this issue?

Thank you!

2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

Hi, thanks for the explanation! You're right, there's a slight delay in the onChange event of Flatpickr when clicking the Apply button. To handle this, you can manually trigger the onChange event before running the rest of your client action logic.

To do this, add a JavaScript node at the beginning of your client action to fire the event manually:

var input = document

.getElementById($parameters.Widget)  

.querySelector("input.flatpickr-input");

var fp = input && input._flatpickr;

if (fp) {  

fp.setDate(fp.selectedDates, true);

}

Pass the datepicker widget id as the parameter.

Also I uploaded an updated OML.

DatePicker.oml
2026-01-28 16-57-48
Mihai Melencu
Champion

Hi @John Joven Timpog ,

I'm trying to clarify the actual behavior and isolate the cause of the issue. Are you able to share your OML or recreate your use case so we can better understand how your logic is set up?

Each selection in the Date Picker (date or time) triggers the event and update the local variable accordingly.

Also, it sounds like the filtering action is only triggered manually by the user clicking the Apply button. If that’s the case, the variable should already be updated by then 

2023-09-24 13-59-10
John Joven Timpog

Hi @Mihai Melencu

I really appreciate your fast response, here is the sample screenshot for clarity, notice that the date on the message is not same on the actual selected date on the field. 

This can be replicated by clicking the apply button while the datepicker is active. see the screenshot below. 

attached also is a sample OML. Thank you so much!

DatePicker.oml
2026-01-28 16-57-48
Mihai Melencu
Champion
Solution

Hi, thanks for the explanation! You're right, there's a slight delay in the onChange event of Flatpickr when clicking the Apply button. To handle this, you can manually trigger the onChange event before running the rest of your client action logic.

To do this, add a JavaScript node at the beginning of your client action to fire the event manually:

var input = document

.getElementById($parameters.Widget)  

.querySelector("input.flatpickr-input");

var fp = input && input._flatpickr;

if (fp) {  

fp.setDate(fp.selectedDates, true);

}

Pass the datepicker widget id as the parameter.

Also I uploaded an updated OML.

DatePicker.oml
2023-09-24 13-59-10
John Joven Timpog

Hi @Mihai Melencu ,


It's working! will be altering a little bit since we are using 2 date pickers as we are doing a date range. 

Thank you so much!!!

2023-06-13 12-29-43
Sakthivel P

Hi @John Joven Timpog,

I attempted to replicate the same issue, but it is working fine for me. Could you please share your OML so I can debug the issue more accurately?

2023-09-24 13-59-10
John Joven Timpog

Hello @Sakthivel P

Here is the sample screenshot for clarity, notice that the date on the message popup is not same on the actual selected date on the field. 

This can be replicated by clicking the apply button while the datepicker is active. see the screenshot below. 


attached also is a sample OML. Thank you so much!

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