Docs

Docs

Date Time Picker

Date Time Picker is an input field for selecting both a date and a 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 through 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 defines the time interval (in seconds) between the items displayed in the time picker overlay. It also specifies the amount by which the time increases/decreases using the up/down arrow keys (when the overlays are disabled).

The default step is one hour (that is, 3600). Unlike with 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
The step must divide an hour or day evenly. For example, "15 minutes", "30 minutes" and "2 hours" are valid steps, while "42 minutes" isn’t.

The displayed time format changes based on the step.

<DateTimePicker
  label='Message received'
  step={1}
  value='2020-06-12T15:45:08'
/>