Date Time Range Field

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

Basic usage

You can render your Date Time Range Field with either one input using SingleInputDateTimeRangeField or two inputs using MultiInputDateTimeRangeField as show below.

—

<MultiInputDateTimeRangeField />
<SingleInputDateTimeRangeField />

<MultiInputDateTimeRangeField />
<SingleInputDateTimeRangeField />

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Uncontrolled field

Controlled field

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

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