Docs

Date Time Picker

Date Time Picker is an input field for selecting a date and time.
<DateTimePicker label="Meeting date and time" />

The date and time can be entered directly using the keyboard in the format of the current locale, or by selecting the date and time from the Date Time Picker’s two overlays. The overlays open when their respective fields are clicked or any input is entered when the fields are focused.

Common Input Field Features

DateTimePicker includes all Text Field and shared input field features.

Step

Date Time Picker’s step parameter is used to define the time interval in seconds between the items displayed in the time picker overlay. It also specifies the amount by which the time increases or decreases using the up/down arrow keys when the overlays are disabled.

The default step is one hour (i.e., 3600 seconds). Unlike Number Field, Date Time Picker accepts values that don’t align with the specified step.

<DateTimePicker
  label="Meeting date and time"
  step={60 * 30}
  value="2020-06-12T12:30"
/>
Note
Use Even Steps
A step must divide an hour or a day, evenly. For example, "15 minutes" and "30 minutes" are valid steps for an hour, and "2 hours" is a valid step for a day, whereas "42 minutes" isn’t valid for either.

The displayed time format changes based on the step.

<DateTimePicker
  label="Message received"
  step={1}
  value="2020-06-12T15:45:08"
/>
Important
You can find more information in the corresponding article on vaadin.com.