Time Range Field

The Time Range Field lets 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

hh:mm aa

–

hh:mm aa

From - To

hh:mm aa – hh:mm aa

<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 value

The value of the component can be uncontrolled or controlled.

Uncontrolled field

03:30 PM – 06:30 PM

Controlled field

03:30 PM – 06:30 PM

<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

Localization

See the Date format and localization and Translated components documentation pages for more details.

Validation

See the Validation documentation page for more details.

API

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