Time Picker

The Time Picker component lets the user select a time.

Basic usage

Basic time picker

<TimePicker label="Basic time picker" />

<TimePicker label="Basic time picker" />

Press Enter to start editing

Component composition

The component is built using the TimeField for the keyboard editing, the DigitalClock for the desktop view editing, and the TimeClock for the mobile view editing. All the documented props of those two components can also be passed to the Time Picker component.

Check-out their documentation page for more information:

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled.

Uncontrolled picker

Controlled picker

<TimePicker
  label="Uncontrolled picker"
  defaultValue={dayjs('2022-04-17T15:30')}
/>
<TimePicker
  label="Controlled picker"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

<TimePicker
  label="Uncontrolled picker"
  defaultValue={dayjs('2022-04-17T15:30')}
/>
<TimePicker
  label="Controlled picker"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

Press Enter to start editing

Available components

The component is available in four variants:

The DesktopTimePicker component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.
The MobileTimePicker component which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field.
The TimePicker component which renders DesktopTimePicker or MobileTimePicker depending on the device it runs on.
The StaticTimePicker component which renders without the popover/modal and field.

Desktop variant

Mobile variant

Responsive variant

Static variant

<DemoItem label="Desktop variant">
  <DesktopTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <TimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>

<DemoItem label="Desktop variant">
  <DesktopTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Mobile variant">
  <MobileTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Responsive variant">
  <TimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>
<DemoItem label="Static variant">
  <StaticTimePicker defaultValue={dayjs('2022-04-17T15:30')} />
</DemoItem>

Press Enter to start editing

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.

Form props

The component can be disabled or read-only.

disabled

readOnly

<TimePicker label="disabled" disabled />
<TimePicker label="readOnly" readOnly />

<TimePicker label="disabled" disabled />
<TimePicker label="readOnly" readOnly />

Press Enter to start editing

Views

The component supports three views: hours, minutes and seconds.

By default, the hours and minutes views are enabled. Use the views prop to change this behavior:

"hours", "minutes" and "seconds"

"hours"

"minutes" and "seconds"

<MobileTimePicker
  label={'"hours", "minutes" and "seconds"'}
  views={['hours', 'minutes', 'seconds']}
/>
<MobileTimePicker label={'"hours"'} views={['hours']} />
<MobileTimePicker
  label={'"minutes" and "seconds"'}
  views={['minutes', 'seconds']}
  format="mm:ss"
/>

<MobileTimePicker
  label={'"hours", "minutes" and "seconds"'}
  views={['hours', 'minutes', 'seconds']}
/>
<MobileTimePicker label={'"hours"'} views={['hours']} />
<MobileTimePicker
  label={'"minutes" and "seconds"'}
  views={['minutes', 'seconds']}
  format="mm:ss"
/>

Press Enter to start editing

By default, the component renders the hours view on mount. Use the openTo prop to change this behavior:

"minutes"

"seconds"

<MobileTimePicker label={'"minutes"'} openTo="minutes" />
<MobileTimePicker
  label={'"seconds"'}
  openTo="seconds"
  views={['minutes', 'seconds']}
  format="mm:ss"
/>

<MobileTimePicker label={'"minutes"'} openTo="minutes" />
<MobileTimePicker
  label={'"seconds"'}
  openTo="seconds"
  views={['minutes', 'seconds']}
  format="mm:ss"
/>

Press Enter to start editing

Landscape orientation

By default, the Time Picker component automatically sets the orientation based on the window.orientation value.

You can force a specific orientation using the orientation prop.

<StaticTimePicker orientation="landscape" />

<StaticTimePicker orientation="landscape" />

Press Enter to start editing

Validation

You can find the documentation in the Validation page

API

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