DateTimePicker | X4Documentation

<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:

Attribute	Description
`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 `Image`, `Map`, ⁣`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 `Image`, `Map` 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