Skip to main content
Version: 8.0

DateTimePicker component

Level: beginner

DateTimePicker is a component that lets you set up a Date/Time type field on the app page. The aria-label attribute is generated automatically and refers to the <input> parent element.

Properties

control FormControl

Control.

label string

Label.

ariaLabel string

A property mapped to the aria-label element attribute.

value string

The value of the Date/Time type field.

disabled boolean

A flag that locks the Date/Time type field from editing.

readonly boolean

A flag that sets the Date/Time type field to read-only. By default, false.

rowModeSizePx number

The width of the Date/Time type field. By default, 320.

multiYearSelector boolean

A flag that enables the year selector on year click. By default, false.

twelvehour boolean

If set to true, the field uses the 12-hour clock. By default, false.

startView string

The property that sets the period for the displayed data. By default, month.

Available values

month

Month.

year

Year.

hour

Hour.

multi-year

Several years.

mode string

The display mode of the Date/Time type field. By default, auto.

Available values

auto

Automatic mode.

portrait

Portrait mode.

landscape

Landscape mode.

timeInterval number

The search delay duration, in milliseconds. By default, 1.

preventSameDateTimeSelection boolean

Lock selecting the currently selected date and time. By default, false.

Keyboard shortcuts

LEFT_ARROW

Highlight the previous day.

RIGHT_ARROW

Highlight the following day.

UP_ARROW

Highlight the previous week.

DOWN_ARROW

Highlight the next week.

HOME

Highlight the first day of the month.

END

Highlight the last day of the month.

PAGE_UP

Highlight the previous month.

PAGE_DOWN

Highlight the following month.

ALT + PAGE_UP

Highlight the previous year.

ALT + PAGE_DOWN

Highlight the following year.

ENTER

Select the highlighted element.