58
Views
7
Comments
Solved
Outsystems Reactive Datepicker always empty

Hello,


my datepicker (https://bouke.outsystemscloud.com/datetes) in React is always emtpy:


This shouldn't be the most difficult thing in the world, but I can't seem to make it work. 

I copied a OML from a forum here (https://www.outsystems.com/forums/discussion/56151/outsystems-ui-datepicker-in-react/). If I open that (https://bouke.outsystemscloud.com/Reactive_DatePicker), i do see a date:

So, to be clear, both screens are exactly the same, only the first is copied into a reactive web module I created and the second one is in a OML that i got from the forum and openend in my PE.

Regards Bouke




Rank: #109
Solution

Bouke,

The OutSystems DatePicker has been created using the Pikaday.js library 

Check it's usage at https://github.com/Pikaday/Pikaday/blob/master/README.md

<input type="text" id="datepicker">

Change the input box #Input_Date type to text, currently in your case https://bouke.outsystemscloud.com/datetest/DatePicker_HorribleSolution it is date. 

Also, in the other working example https://bouke.outsystemscloud.com/Reactive_DatePicker/ it is text.

Regards,

Swatantra



mvp_badge
MVP
Rank: #76

Hi Bouke,

You must have forgotten to copy some logic along with the UI part.

One thing you can easily do to make sure both OMLs are identical is compare them in Service Studio.

In Service Studio while you have your module (the one with the copied UI) open, you can click on the Module menu following ‘Compare and Merge with Another version or File’. Then select the module (the one you have found on the forum) from your local disk and compare them to see if something was missing in your module.

Hope this helps.

Regards,

Nordin

Rank: #204

Bouke Winsemius wrote:

Hello,


my datepicker (https://bouke.outsystemscloud.com/datetes) in React is always emtpy:


This shouldn't be the most difficult thing in the world, but I can't seem to make it work. 

I copied a OML from a forum here (https://www.outsystems.com/forums/discussion/56151/outsystems-ui-datepicker-in-react/). If I open that (https://bouke.outsystemscloud.com/Reactive_DatePicker), i do see a date:

So, to be clear, both screens are exactly the same, only the first is copied into a reactive web module I created and the second one is in a OML that i got from the forum and openend in my PE.

Regards Bouke




Hi Bouke, can you update your oml?


Rank: #32671

herewith...

datetest.oml

Rank: #109
Solution

Bouke,

The OutSystems DatePicker has been created using the Pikaday.js library 

Check it's usage at https://github.com/Pikaday/Pikaday/blob/master/README.md

<input type="text" id="datepicker">

Change the input box #Input_Date type to text, currently in your case https://bouke.outsystemscloud.com/datetest/DatePicker_HorribleSolution it is date. 

Also, in the other working example https://bouke.outsystemscloud.com/Reactive_DatePicker/ it is text.

Regards,

Swatantra



mvp_badge
MVP
Rank: #76

Hi Bouke,

There is a difference between the original and your module.

The original has the Input Type of the Input_Date widget set to Text where in your module it is set to Date.

Change the Input Type to Text in your module too, in order to make it work.

Regards,

Nordin