Date Time Picker

This component combines the date & time pickers.

It allows the user to select both date and time with the same control.

Note that this component is the DatePicker and TimePicker component combined, so any of these components' props can be passed to the DateTimePicker.

Basic usage

Allows choosing date then time. There are 4 steps available (year, date, hour, and minute), so tabs are required to visually distinguish date/time steps.

DateTimePicker

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateTimePicker
    renderInput={(props) => <TextField {...props} />}
    label="DateTimePicker"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
  />
</LocalizationProvider>
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateTimePicker
    renderInput={(props) => <TextField {...props} />}
    label="DateTimePicker"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
  />
</LocalizationProvider>

Press Enter to start editing

Responsiveness

The DateTimePicker component is designed and optimized for the device it runs on.

The MobileDateTimePicker component works best for touch devices and small screens.
The DesktopDateTimePicker component works best for mouse devices and large screens.

By default, the DateTimePicker component renders the desktop version if the media query @media (pointer: fine) matches. This can be customized with the desktopModeMediaQuery prop.

There are certain caveats when testing pickers, please refer to this section for more information.

For mobile

For desktop

Responsive

Form props

The date time picker component can be disabled or read-only.

disabled

read-only

Validation

You can find the documentation in the Validation page

Static mode

It's possible to render any date & time picker inline. This will enable building custom popover/modal containers.

April 2022

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticDateTimePicker
    displayStaticWrapperAs="desktop"
    openTo="year"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticDateTimePicker
    displayStaticWrapperAs="desktop"
    openTo="year"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Press Enter to start editing

Customization

Here are some examples of heavily customized date & time pickers:

Hardcoded helper text

With error handler

Clear Initial State