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