501
Views
11
Comments
Outsystems UI React - Datepicker with input
Question

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!

ReactiveDatePicker.oml

mvp_badge
MVP
Rank: #17

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

Rank: #1647

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


ReactiveDatePicker.oml

mvp_badge
MVP
Rank: #17

Hi Karin,

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

Regards,

Daniel

Rank: #1647

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


mvp_badge
MVP
Rank: #17

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

ReactiveDatePicker.oml

Rank: #1647

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

ReactiveDatePicker.oml

mvp_badge
MVP
Rank: #17

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

mvp_badge
MVP
Rank: #17

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

Rank: #1647

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

Rank: #75800

Hello

I'm trying to create mobile app having same data picker function like above.

But I'm in trouble that the function select the date on calendar can't run well.

The date can't be rewrote by the date I selected.

Can you please check my oml file?

the screen that has trouble is "screen1".

thank you.

BTTEST.oml

Rank: #75800

Hello

I'm sorry that I can solve the problem.

The problem that I can't  rewrite the date happens in only the screen on "OPEN IN BROWSER".

I opened the app in my phone, then I can.

But the problem that we can't  rewrite the date in "OPEN IN BROWSER" remain,  I think.

Thank you.