Time Picker

Time Picker let the user select a 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

<NextTimePicker label="Basic time picker" />

<NextTimePicker label="Basic time picker" />

Press Enter to start editing

Component composition

The Time Picker components are built using the TimeField for the keyboard editing and the TimeClock for the view editing. All the documented props of those two components can also be passed to the Time Picker components.

Check-out their documentation page for more information:

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled picker

Controlled picker

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

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

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

<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')}
/>

<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')}
/>

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.

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

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

Press Enter to start editing

Form props

The Time Picker component can be disabled or read-only.

disabled

readOnly

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

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

Press Enter to start editing

Views

The component can contain three views: hours, minutes, and seconds. By default, only the hours and minutes views are enabled.

You can customize the enabled views using the views prop. Views will appear in the order they're included in the views array.

"hours", "minutes" and "seconds"

"hours"

"minutes" and "seconds"

<NextTimePicker
  label={'"hours", "minutes" and "seconds"'}
  defaultValue={dayjs('2022-04-07T15:30:25')}
  views={['hours', 'minutes', 'seconds']}
/>
<NextTimePicker
  label={'"hours"'}
  defaultValue={dayjs('2022-04-07T15:30:25')}
  views={['hours']}
/>
<NextTimePicker
  label={'"minutes" and "seconds"'}
  defaultValue={dayjs('2022-04-07T15:30:25')}
  views={['minutes', 'seconds']}
/>

<NextTimePicker
  label={'"hours", "minutes" and "seconds"'}
  defaultValue={dayjs('2022-04-07T15:30:25')}
  views={['hours', 'minutes', 'seconds']}
/>
<NextTimePicker
  label={'"hours"'}
  defaultValue={dayjs('2022-04-07T15:30:25')}
  views={['hours']}
/>
<NextTimePicker
  label={'"minutes" and "seconds"'}
  defaultValue={dayjs('2022-04-07T15:30:25')}
  views={['minutes', 'seconds']}
/>

Press Enter to start editing

Landscape orientation

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

You can force a specific orientation using the orientation prop.

<StaticNextTimePicker
  defaultValue={dayjs('2022-04-07')}
  orientation="landscape"
/>

<StaticNextTimePicker
  defaultValue={dayjs('2022-04-07')}
  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.