🚀 MUI X v6 is out! Discover what's new and get started now!

Time Range Field

The Time Range Field let the user select a range of time with the keyboard.

Basic usage

You can render your Time Range Field with either one input using SingleInputTimeRangeField or two inputs using MultiInputTimeRangeField as show below.

From

—

From - To

<MultiInputTimeRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'From' : 'To',
    }),
  }}
/>
<SingleInputTimeRangeField label="From - To" />

<MultiInputTimeRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'From' : 'To',
    }),
  }}
/>
<SingleInputTimeRangeField label="From - To" />

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled.

Uncontrolled field

Controlled field

<SingleInputTimeRangeField
  label="Uncontrolled field"
  defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-17T18:30')]}
/>
<SingleInputTimeRangeField
  label="Controlled field"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

<SingleInputTimeRangeField
  label="Uncontrolled field"
  defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-17T18:30')]}
/>
<SingleInputTimeRangeField
  label="Controlled field"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

Press Enter to start editing

API

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