Date and time formatting

Settings for formatting the date and time.

Some controls can display date and time values or receive date and time values. A process variable of the VT_DATE data type (for DateTimeVarIn and DateTimeVarOut controls) or the system time (for Clock control) is used as the source. The date and time are automatically displayed in the format valid for the language of the app or browser.

Language-independent settings, such as the positioning of the date and time display, can be defined for a control via the properties of the "DateTimeFormat" category.

DateTimeMode

Determines whether only the time, only the date or both are displayed and how these elements are positioned within the control.

• The time format is defined via the "FormatTime" property and the date format via the "FormatDate" property.

• For the Clock and DateTimeVarOut controls, the horizontal and vertical alignment of the date and time display can be defined using the "AlignItems" and "JustifyContent" properties.

• TimeOnly

  Displays only the time.

• DateOnly

  Displays only the date.

• TimeDate

  Displays both the date and the time. The two elements are positioned in one line, the time on the left and then the date on the right.

• DateTime

  Displays both the date and the time. The two elements are positioned in one line, the date on the left and the time on the right.

• TimeCRDate

  Displays both the date and the time. The two elements are positioned in a column, with the time positioned above the date.

• DateCRTime

  Displays both the date and the time. The two elements are positioned in a column, with the date positioned above the time.

FormatDate

Defines the date format (see also Automatic switching of date and time formats depending on the language settingbelow).

• LongDate

  Date with the month written out in full.

  Example:

  en-EN	en-US
  06 February 2023	February 06, 2023

• NamedLongDate

  Date with day of the week and month written out in full.

  Example:

  en-EN	en-US
  Monday, 06. February2023	Monday, December 06, 2023

• ShortDate

  Date in figures.

  Example:

  en-EN	en-US
  06.02.2023	02/06/2023

FormatTime

Defines the time format (see also Automatic switching of date and time formats depending on the language settingbelow).

• LongTime

  Indication of hours, minutes and seconds.

  Example:

  en-EN	en-US
  16:03:45	04:03:45 PM

• ShortTime

  Indication of hours and minutes.

  Example:

  en-EN	en-US
  16:03	04:03 PM

Automatic switching of date and time formats depending on the language setting

Different languages and regions have different rules for specifying the date and time, generally referred to as date and time formats.

Example: The same calendar day is given as "06 February 2023" in Germany and as "February 06, 2023" in the USA.

At runtime, this language-dependent date and time format for the output control elements "DateTimeVarOut" and "Clock" is determined by the language setting of the app. Initially, the language is set by the value of "RuntimeLanguage" in the appsettings.services.json file. The file can be found under [Client directory]Wappsettings. The default setting for the runtime language is German (de-DE).

Excerpt from "appsettings.services.json"

The user can select a different language in the running app. The application frame, for example, contains a "Settings" page on which the preferred language (German or English) can be selected. By changing the app language, the format in all control elements of the type "Clock" and "DateTimeVarOut" is automatically changed to the format used in the respective language.

With the "DateTimeVarIn" input control element, however, the language-dependent format does not depend on the language setting of the app, but on the language setting of the browser.

Affects these controls:

Clock, DateTimeVarIn, DateTimeVarOut