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. 

Hello SeabassW, how are you?

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


Hi,

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.

Regards,

Marcelo

Thanks for replying! Im using Service Studio 11.0.406.0 with OutSystems UI Web version 1.5.1. 

Jay Santos wrote:

Hello SeabassW, how are you?

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




Marcelo Ferreira wrote:

Hi,

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.

Regards,

Marcelo


That seems like a good solution. I will try that soon! Thank you!

SeabassW wrote:

Marcelo Ferreira wrote:

Hi,

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.

Regards,

Marcelo


That seems like a good solution. I will try that soon! Thank you!

Me too came with a similar requirement where the date format is DD-MMM-YYYY which is not supported by the custom mask component. So what I did is

1. Use date picker and set date format as "DD-MMM-YYYY"

2. Bind a text variable to the input control associated with the date picker(variable of date type will loose the selected date)

3. While saving, use this text and convert it to datetime expected by outsystems

4. This will get stored properly in the DB

5. To show the date back to the control, set the text variable associated with the input, from the date returned in the preparation


This solved my issue.. Hope this will be useful for someone else..


 

Hi SeabassW .

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

There were a lot of changes since 1.5.1.

V1.7.0

  • StartEmpty Input Parameter was added in the DatePicker.


V1.7.6

  • 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.


V1.8.0

  • 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.


V1.8.1

  • 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.


V1.8.2

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


V1.8.3

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


V1.8.5

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


Current Stable: v1.8.6


Cheers