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 a textbox with a popup on desktop.

Basic example

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Press Enter to start editing

Static mode

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

Select time

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticTimePicker
    displayStaticWrapperAs="mobile"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticTimePicker
    displayStaticWrapperAs="mobile"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Press Enter to start editing

Responsiveness

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

The MobileTimePicker component works best for touch devices and small screens.
The DesktopTimePicker component works best for mouse devices and large screens.

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

Form props

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

disabled

read-only

Time validation

min/max time

Disable odd hours

Landscape

Select time

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticTimePicker
    ampm
    orientation="landscape"
    openTo="minutes"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticTimePicker
    ampm
    orientation="landscape"
    openTo="minutes"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Press Enter to start editing

Sub-components

Some lower-level sub-components (ClockPicker) are also exported. These are rendered without a wrapper or outer logic (masked input, date values parsing and validation, etc.).

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <ClockPicker date={date} onChange={(newDate) => setDate(newDate)} />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <ClockPicker date={date} onChange={(newDate) => setDate(newDate)} />
</LocalizationProvider>

Press Enter to start editing

Seconds

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

With seconds

Minutes and seconds

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.