[OutSystems UI] Can't get manually input date from Local Variable when DatePickerSetEditableInput use
outsystems-ui
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive
Service Studio Version
11.53.31 (Build 61742)

Platform version is Version 11.17.0 (Build 36291) *PE


- What do you need?

That the manually input date be assigned to the LocalVariable.

- How it actually works

If you manually input the date and then Submit, it will not be assigned to the LocalVariable.

Only the value selected in the DatePicker will be assigned to the LocalVariable.

- What is the version of OutSystems UI?

2.13.0

- What I want to know

How to assign the input value to a LocalVariable after manually inputing the value and then submitting it.


I can't get screenshots of the screen, implementation, or debugger right now, so I'll post them later.

Hi,

You need to have the handler for when you select the date on datepicker and also an onchange handler on the input widget to cover the manual input of the date. However, I did some tests and it only worked (i.e onChange was triggered) when I pressed enter after I change manually the date.

Please check the attached .oml.

Regards


Sample.oml

Hi

Thank you for your reply and the sample.

I have confirmed that it works with manual input + Enter Button. But as you also tested, when I focus out with mouse etc., it is not assigned to LovalVariable. If you know of a solution, I would appreciate it if you could let me know.

Regards


Hello Junichi,

You need to add the "DatePickerSetEditableInput" on the OnReady event of the page so that the input will be editable. 

After that, you should be fine.

I will attach an oml with a solution. 

Hope it helps!

Paulo Rosário

ManualDateInput.oml

Hello Paulo :-)

Thanks for the reply and the sample!

The manual input was perfect.

But I still can't get the LocalVariable to assign the value I entered when I manually type it in, focus out, and submit.

If you know of any cause or workaround, I'd appreciate it if you could let me know.

Regards

Hmm, I don't need to press enter to trigger the OnSelectAction. If I manually input the date and click out of the picker it works.

However, if the issue is on the submit button, I added a bit of JS to a button that gets the value of the widget and assigns it to your local variable. 

I will leave the updated oml here.

ManualDateInput.oml

Hi Everyone ,


Does anyone got the solution for this , if yes can you please post the solution or steps


Thanks

Shehroze khan

Hi Junichi Katano , please note that in reactive app as soon as you change the variable attached to an input then it is ready for you to either click inside the input to select a date or type the date as per your locale system date. Now you can also create a handler that runs with the help of button and you can assign the value on that you entered in the date input. You can also set the date other way round i.e. from text var value to date from a different text var. 

Hope this helps. Let me know if you need any further information.

  

Hi @Junichi Katano

In order to clarify and try to help, are you trying to set the variable at the input OnChange? Assigning based on press Enter key is not an option, that's it?

Let me share some notes about this pattern, it has been created on top of Flatpickr library, which have that behaviour based on press the Enter key due to the validations, in order to avoid doing them each time as user enter a new character in the input. 
Another thing related with this implementation... in order to enable the ability do deal with Date Types and take the advantages of the OutSystems platform (validations) we're using an approach this library have, that is related with the creation of a new input (clone) and hide the real one (added by platform), this way library will deal with the "translations" (from Date Types into String Type automatically). That's why the local variable is not being properly assigned at the onInputChange moment, once library will only trigger that assign once you press Enter key (as mentioned above).

Let me know if you're searching specifically for the behaviour at the onInputChange event, and I'will try to share a solution for that case.

Cheers,
JR

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