Time Picker

Time pickers allow the user to select a single time.

The selected time is indicated by the filled circle at the end of the clock hand.

Basic usage

The time picker is rendered as a modal dialog on mobile, and in the field on desktop.

Basic time picker

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

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <NextTimePicker label="Basic 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">
    <NextTimePicker
      label="Uncontrolled picker"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <NextTimePicker
      label="Controlled picker"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

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

Press Enter to start editing

Responsiveness

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

The MobileNextTimePicker component works best for touch devices and small screens.
The DesktopNextTimePicker component works best for mouse devices and large screens.

By default, the NextTimePicker 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}>
    <MobileNextTimePicker
      label="For mobile"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <DesktopNextTimePicker
      label="For desktop"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
    <NextTimePicker
      label="Responsive"
      defaultValue={dayjs('2022-04-07T15:30')}
    />
  </Stack>
</LocalizationProvider>

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

Press Enter to start editing

Static mode

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

Select time

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticNextTimePicker defaultValue={dayjs('2022-04-07')} />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticNextTimePicker defaultValue={dayjs('2022-04-07')} />
</LocalizationProvider>

Press Enter to start editing

Form props

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

disabled

readOnly

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

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

Press Enter to start editing

Validation

You can find the documentation in the Validation page

Landscape

Select time

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticNextTimePicker
    ampm
    orientation="landscape"
    openTo="minutes"
    defaultValue={dayjs('2022-04-07')}
  />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticNextTimePicker
    ampm
    orientation="landscape"
    openTo="minutes"
    defaultValue={dayjs('2022-04-07')}
  />
</LocalizationProvider>

Press Enter to start editing

Sub-components

Some lower-level sub-components (ClockPicker) are also exported.

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimeClock value={value} onChange={(newValue) => setValue(newValue)} />
</LocalizationProvider>

Press Enter to start editing

Seconds

The seconds input can be used for selection of a precise time point.

Hours, minutes and seconds

Minutes and seconds

Time Picker

Basic usage

Uncontrolled vs. Controlled

Responsiveness

Static mode

Form props

Validation

Landscape

Sub-components

Seconds

API