Damn, my date returns NAMN!

Blog
1

Component: UI Designer

You have created a form in UI Designer where a user enters a date, filling in all configuration fields.

date picker
date picker1790×608 36.4 KB

So What? Each time a user selects a date, date picker returns NAMN.

1292×1044 72.1 KB

What's going on?

It's due to a display issue

It happens if Date widget property Technical date format is not correct. 

The Technical date format property will work correctly as long as, at the end of the day, its value contains a valid formatting string, which is nothing but a pattern built with some predefined keywords, e.g.: dd/MM/yyyy (You will find all the supported keywords in the Angular documentation for date filter.)

However, the field to enter the value of the Technical date format property is dynamic, which means that the value can be entered:

  • either directly as a "constant" (hint: the value will be interpreted as a constant when the little icon at the right of the field displays an: "fx"); e.g.:

Technical date format: dd/MM/yyyy fx

  • or indirectly as a "bind to an expression" that uses one or more of the form's/page's variables (hint: the value will be interpreted as an expression when the little icon at the right of the field displays an: "x"; e.g.:

Technical date format: myVariableContainingTheFormatString x

Therefore, always make sure the content of the Technical date format field is consistent with the type chosen for the property's value.

How does it work?

As explained in the Documentation, the Date picker widget supports the following types for its Value property as input:

  • ISO 8601 String variables (with or without time information)
  • Date objects
  • Long number values (Milliseconds since epoch)

However, the output of the widget is always a Javascript Date object. So it will change the type of the variable bound to the widget Value to a Date object when the user selects a date. This is required in order to ensure backward compatibility for pages designed with older UI Designer versions.

When sent in the JSON body of a request, the Date object is serialized into an ISO 8601 formatted String variable with the time set to midnight UTC (e.g., 2016-12-31T00:00:00.000Z).

You can configure the displayed date format using a pattern, using yyyy for year, MM for Month, dd for day.