Date Time Range Field

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

Basic usage

—

<MultiInputDateTimeRangeField />

<MultiInputDateTimeRangeField />

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled field

—

Controlled field

—

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

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

<MultiInputDateTimeRangeField />