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 NextDatePicker and NextTimePicker 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.

Basic date time picker

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <NextDateTimePicker label="Basic date time picker" />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <NextDateTimePicker label="Basic date time picker" />
</LocalizationProvider>

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled picker

Controlled picker

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={2} direction="row">
    <NextDateTimePicker
      label="Uncontrolled picker"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <NextDateTimePicker
      label="Controlled picker"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={2} direction="row">
    <NextDateTimePicker
      label="Uncontrolled picker"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <NextDateTimePicker
      label="Controlled picker"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

Press Enter to start editing

Responsiveness

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

The MobileNextDateTimePicker component works best for touch devices and small screens.
The DesktopNextDateTimePicker component works best for mouse devices and large screens.

By default, the NextDateTimePicker 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

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={3}>
    <MobileNextDateTimePicker
      label="For mobile"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <DesktopNextDateTimePicker
      label="For desktop"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <NextDateTimePicker
      label="Responsive"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
  </Stack>
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={3}>
    <MobileNextDateTimePicker
      label="For mobile"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <DesktopNextDateTimePicker
      label="For desktop"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <NextDateTimePicker
      label="Responsive"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
  </Stack>
</LocalizationProvider>

Press Enter to start editing

Static mode

It is also possible to render any date time picker without the modal/popover and text field. This will enable building custom popover/modal containers.

April 2022

SMTWTFS

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticNextDateTimePicker
    displayStaticWrapperAs="desktop"
    defaultValue={dayjs('2022-04-07T15:30')}
  />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticNextDateTimePicker
    displayStaticWrapperAs="desktop"
    defaultValue={dayjs('2022-04-07T15:30')}
  />
</LocalizationProvider>

Press Enter to start editing

Form props

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

disabled

readOnly

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={3}>
    <NextDateTimePicker label="disabled" disabled />
    <NextDateTimePicker label="readOnly" readOnly />
  </Stack>
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={3}>
    <NextDateTimePicker label="disabled" disabled />
    <NextDateTimePicker label="readOnly" readOnly />
  </Stack>
</LocalizationProvider>

Press Enter to start editing

Validation

You can find the documentation in the Validation page

Customization

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

Hardcoded helper text

With error handler

Date Time Picker

Basic usage

Uncontrolled vs. Controlled

Responsiveness

Static mode

Form props

Validation

Customization

API