Time Range Picker

The Time Range Picker lets users select a range of time values.

Basic usage

Component composition

The component is built using the SingleInputTimeRangeField for the keyboard editing and the DigitalClock for the view editing.

Check out their documentation page for more information:

• Time Range Field
• Digital Clock

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Available components

The component is available in three variants:

• The DesktopTimeRangePicker component which works best for mouse devices and large screens. It renders the views inside a popover and a field for keyboard editing.

• The MobileTimeRangePicker component which works best for touch devices and small screens. It renders the views inside a modal and a field for keyboard editing.

• The TimeRangePicker component which renders DesktopTimeRangePicker or MobileTimeRangePicker depending on the device it runs on.

By default, the TimeRangePicker 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 supports the disabled, readOnly and name props:

Customization

Use a multi input field

You can pass the MultiInputTimeRangeField component to the Time Range Picker to use it for keyboard editing:

Change end time label

The below demo shows how to add a custom label on the end time view showing the selected time range duration.

It replaces the default digitalClockItem slot component with a different one calculating the duration of the range when selecting the end time.

Customize the field

You can find the documentation in the Custom field page.

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.

• <DesktopTimeRangePicker />
• <DigitalClock />
• <MobileTimeRangePicker />
• <MultiSectionDigitalClock />
• <TimeRangePicker />
• <TimeRangePickerTabs />
• <TimeRangePickerToolbar />