Outsystems UI React - Datepicker with input

Hello,

We are using the datepicker from Outsystems UI (version 2.3.2) in REACTIVE with an input. We have the following issues. First off, we had the problem as mentioned by Marleen in  OutSystems UI Datepicker in React - OutSystems. This is if the input is of type date. We hid the default browser datepicker with css but then we still have the following issue.

If you try to manually enter a date (with the keyboard) in this case, this does not work at all, see: https://karinsoutberg.outsystemscloud.com/Reactive_DatePicker/DatePicker_InputDate

Try entering 31-03-2020 for example, it fails miserably.

So we changed the input to type text, you can then manually enter dates fine, but then the formatting is horrible. This also does some funny things with the timezones there, but the actually variable does hold the correct value, as can be seen by pressing save. 

See:  https://karinsoutberg.outsystemscloud.com/Reactive_DatePicker/DatePicker_InputText

So for now I made this terrible solution where there is a fake local variable that shows the date in pretty format and it saves it to the actual local variable we are using, but I was hoping there would be a better way... 

See https://karinsoutberg.outsystemscloud.com/Reactive_DatePicker/DatePicker_HorribleSolution


I have attached the oml for future reference.


Can someone please tell me if we are just using the datepicker in combination with input wrong, or if the datepicker is just terribly buggy? Thanks in advance!

Hi Karin,

I think setting the data type of the input to text is correct.

So I changed your DatePicker_InputText screen to not use a form, and then it looks to work correctly.

Now why that is I don't know (yet).

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Karin,

I think setting the data type of the input to text is correct.

So I changed your DatePicker_InputText screen to not use a form, and then it looks to work correctly.

Now why that is I don't know (yet).

Regards,

Daniel


Hi Daniel,

Thanks for your reply. When I remove the form the date still displays as: 2020-03-03T23:00:00.000Z. See https://karinsoutberg.outsystemscloud.com/Reactive_DatePicker/DatePicker_InputText_WithoutForm?
Did I do something different from you?

Kind regards,

Karin


Hi Karin,

Sorry for the late reply, I have another look this evening for you

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Karin,

Sorry for the late reply, I have another look this evening for you

Regards,

Daniel

Hi Daniel,

Did you happen to take another look?

Thanks!

Karin


Hi,

Sorry, i didn't but I did now :)

See attached updated version of your OML. I added an new screen DatePicker_InputText_WithoutForm.

As you see no form used, I also moved the override of the Input type to text to the attributes, thus not getting a warning in Service Studio on the Input Type property.


In the style sheet of the screen I added the following to hide the native HTML5 date picker icon.

input::-webkit-calendar-picker-indicator{
    display: none;
}

See this recorder usage where the datepicker does work correctly:

Regards,

Daniel

Hi Daniel,

I uploaded your version, but it does not work for me as you showed on your video (see my video). I have no idea why not..

https://www.loom.com/share/fc31d370e56f45bd9c216d4e5251bc2d
Thanks for all your help thou.

Kind regards,

Karin

Hi Karin,

Now I see what you do, and I can confirm it happens for me too. I gift it some more time to find out what goes wrong, this weekend.

Regards,

Daniel

Hi,

It is strange if you enter a date like 1991 it works, but for 2020 it doesn't as soon as you enter the last 0 it resets the year to 0.

I think it is a bug in the widget. You could report it to OutSystems.

Regards,

Daniel

Hi Daniel,

Yes indeed, I've already opened a ticket with them. Hopefully they'll come up with a solution :). Thanks for all your help!

Kind regards,

Karin