Skip to main content
Skip table of contents

DateTimePicker

<DateTimePicker> controls are used to create a date and time picker.

Note:

Please note that the date format depends on the language of the used browser (e.g. German: 31.3.2025 / US English: 03/31/2025).

The following additional attributes can be defined for the  <DateTimePicker>    element:

AttributeDescription
value

Value that is displayed and saved.

  • Data Binding possible

Possible values:

  • With data binding: Date or DateTime
  • Without data binding: Any string
format

Format in which the time is displayed and stored.

Possible values:

  • Date Time With Minutes: Time indicating hours and minutes in the format hh:mm.
  • Date Time With Seconds: Time indicating hours, minutes and seconds in the format hh:mm:ss.
  • Date Time With Milliseconds: Time indicating hours, minutes, seconds and milliseconds in the format hh:mm:ss.sss.
background

Defines the background color of the control.

  • This setting overwrites the default color of the color scheme!
  • This attribute does not work for the Maps and HtmlDocument controls!

Possible values:

  • Hexadecimal color value, e. g. ff5a00

    Do not use a hash (#) before the colour value!
    Do not use a shortened notation of the colour value!
  • Colour code from the colour palette of the web app (see Theming), e. g. A200
displayName

Control title.

  • Translatable
  • Data binding possible

Possible values: Any string

enabled

Defines whether the user can interact with the control.

  • Data binding (Boolean) possible

Possible values: true/false or expression for data binding

The attribute enabled replaces the obsolete attribute disabled. enabled="true" thus corresponds to the obsolete attribute  disabled="false".
fontFamily

Defines the font family.

  • This attribute overrides the default font of the Web App for this control.
  • If the attribute is defined on an element, the font family is inherited by the child elements of the element, unless the child elements have explicitly set the fontFamily attribute.
  • This attribute does not work for the elements Image, Map and HtmlDocument.

Possible values:

  • MainFont: deposited main font
  • Font code from the font palette, e.g.  Font04
fontSize

Defines the font size.

  • This attribute overrides the default font size of the Web App for this control.
  • This attribute does not work for the elements Image, Map and HtmlDocument.

Possible values:

  • Any integer or decimal number with a dot as decimal separator, e.g. 20 ; 20.8 ; .9
  • Font size in pixels, e.g.  20px
  • Font size in point, e.g. 18pt
  • Font size compared to the font size of the parent element, e.g. .8em  or  120%
  • Keywords: xx-Small , x-small , small , medium , large , x-large , xx-large , smaller , larger
fontStretch

Defines the width of each character.

This attribute overrides the default width of the characters for this control.

Possible values:

  • Condensed
  • Expanded
  • ExtraCondensed
  • ExtraExpanded
  • Medium
  • Normal (default)
  • SemiCondensed
  • SemiExpanded
  • UltraCondensed
  • UltraExpanded

This attribute does not work for the elements ImageMap, ⁣Chart and HtmlDocument.

fontStyle

Defines the font style.

This attribute overrides the default font style for this control.

Possible values:

  • italic: italic font
  • normal: normal font (default)
  • oblique: oblique font style (calculated)

This attribute does not work for the elements Image, Map and HtmlDocument.

fontWeight

Defines the font weight.

This attribute overrides the default font weight for this control.

Possible values:

  • Black
  • Bold
  • DemiBold
  • ExtraBlack
  • ExtraBold
  • ExtraLight
  • Heavy
  • Light
  • Medium
  • Normal (default)
  • Regular
  • SemiBold
  • Thin
  • UltraBlack
  • UltraBold
  • UltraLight

This attribute does not work for the ImageMap and HtmlDocument.

foreground

Defines a colour for the foreground (texts etc.) of the control.

  • This setting overwrites the default color of the color scheme!
  • This attribute does not work for the Maps and HtmlDocument controls!

Possible values:

  • Hexadecimal color value, e. g. ff5a00

    Do not use a hash (#) before the colour value!
    Do not use a shortened notation of the colour value!
  • Colour code from the colour palette of the web app (see Theming), e. g. A200
horizontalAlign

Direction in which the elements flow. The order of the elements corresponds to their declaration.

Possible values:

  • left (default)
  • center
  • right
textOverflow

Specifies what should happen when the control is full.

Possible values:

  • ellipsis (default): With ... show that the text is not finished
  • hidden: Break off text, paying attention to whole words

    The use of allow and wordBreak is not recommended in the <DateTimePicker> element. They have the same effect as hidden. Use hidden instead.

visible

Defines whether the control is visible.

  • Data binding (Boolean) possible

Possible values: true / false or string for data binding

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.