DatePicker - Formatting clears variable linked to input

I encountered a problem when using the DatePicker component from OutSystems UI web. The component works fine as long as the DateFormat attribute is left empty. But when the formatting is set, to for example "DD-MM-YYYY", the variable is emptied. This makes it unable to use the selected date in a Save action. The input form will change to "Invalid Date".

I added an .oml and on the screen "RequestDetail" I tested the DatePicker. 

In this screen I added a local variable which will be set to the selected date in the event OnSelect. I added a button which shows the Date linked to the input from the aggregate and the local variable in a Feedback Message. When I change the Date and than press the button, the Date in the input will change to "Invalid Date" and the FeedBack Message will show the variable linked to the variable as "1900-01-01"  and the local variable not linked to it as the selected Date. See the attached image. 

When I link the local variable to the input form and set the value of the aggregate in the OnSelect event to the selected Date, the local variable gets emptied and the other variable keeps it value. 

I think that it goes wrong when formatting the date and presenting it to the user, but this happens in the component and in the Javascript code (I think).

Has anyone else encountered this problem? 

I do not want to clone OSUIWeb and edit this component, so for now I'm not using the DateFormat attribute as a solution.

Screenshots to clarify the problem.

Initial situation: The Date shows when loading the screen. 

When selected a new Date: The input form shows Invalid Date. The variable linked to the input form is empty, but not the local variable that is also set in the OnSelect Event. 


Jay Santos
Rank: #0

Hello SeabassW, how are you?

What version of Service Studio you are using? I've tried reproducing the behaviour using but the Edit Request page seems to be working fine, see the .gif below.

Rank: #16


For some reason the DatePicker doesnt work well with formats thats why I use the CustomMask component to take care of that part. In attachment you can see how I did it. But don't publish my module because I had to delete a couple of stuff to be able to publish it on my environment.




Rank: #40099

Hi SeabassW .

Have you tried a more recent version of OutSystems UI Web?

There were a lot of changes since 1.5.1.


  • StartEmpty Input Parameter was added in the DatePicker.


  • Improved DatePicker year selection UX: selecting a year from the year range will now select and close the selection instead of navigating to the previous or next set of years, which was preventing certain years from being selected.
  • Fixed an issue where the year range was not being updated with the current selection.


  • DatePicker was deprecated and a new version was created with the capability to select an interval of dates. This was done in 1.7.9 but caused an unintended breaking change, so this version rolled back the change and added the DatePicker as a new pattern to avoid it. On the new DatePicker pattern, the library was updated to version 1.8.0 and was added ability to translate the today button, using the AdvancedFormat option.


  • Fixed a DatePicker issue that prevented it from rendering correctly in IE 10 e IE 11.

  • Fixed DatePicker onOpen and onClose events.

  • Fixed DatePicker arrow navigation on Year/ Month view.


  • Fixed an issue introduced in the last release where DatePicker months and years were misaligned in IE11


  • Fixes the DatePicker behaviour while navigating through years if a minimum date and/or maximum date is set. Improves the look of disabled buttons.


  • We fixed the DatePicker OnChange Event to be triggered properly when users change focus with the Tab key.

Current Stable: v1.8.6