Time Range Field

The Time Range Field component let the user select a time range 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.

—

<MultiInputTimeRangeField />
<SingleInputTimeRangeField />

<MultiInputTimeRangeField />
<SingleInputTimeRangeField />

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled field

Controlled field

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

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

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.