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.


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.

  label="Meeting date and time"
  step={60 * 30}
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.

  label="Message received"
You can find more information in the corresponding article on