Time Range Field

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

Basic usage

—

<MultiInputTimeRangeField />

<MultiInputTimeRangeField />

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled field

—

Controlled field

—

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

<DemoItem label="Uncontrolled field">
  <MultiInputTimeRangeField
    defaultValue={[dayjs('2022-04-07T15:30'), dayjs('2022-04-07T18:30')]}
  />
</DemoItem>
<DemoItem label="Controlled field">
  <MultiInputTimeRangeField
    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.

<MultiInputTimeRangeField />