26
Views
3
Comments
React Datepicker in OSUi 2.12.0

Hi all,

In OutsystemsUI v 2.12.0, datepicker uses Flatpickr v4.6.13 JS library.

By default, when using the datepicker, input associated is disabled, but we can enable it using the ClientAction DatePickerSetEditableInput.

If we select a date using the datepicker, the value changes in the textbox and the associated variable is updated accordingly.

If we update the date directly in the textbox, the value obviously change in the textbox but the associated variable is only updated if we press Enter key. This leads to users changing the date but the actual date saved is not the one user is seeing (only if he presses enter key).

What I've tried so far:

1) Set OnChange on the textbox.
This don't work as the event is not fired.

2) Set OnBlur on the textbox.
This don't work as the textbox we're affecting this properties is not the textbox user sees. ( Flatpickr manipulates DOM)

3) Tried to grab the sibling element and set onblur using javascript, after Datepicker is successfully initialized:


No success yet. How are you using Datepickers with input enabled and bypassing this issue?

OML Attached

Thank U ALL.


DatepickerIssues.oml
2023-08-28 07-00-10
Paulo Torres
Champion

Hello,

You should use InitialDate parameter. When you load your screen you should has a variable there.

2025-03-11 17-46-55
Tiago Dias

Hi Paulo,

Thanks for your input but you didn't understand the issue i've described.

2023-08-28 07-00-10
Paulo Torres
Champion

Maybe not :)

I read again... You mean if user change the date directy in input text? If it's this case I don't know how you do this because I can't do that.

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