Date Range Field

The Date Range Field components let the user select a date range with the keyboard.

Basic usage

You can render your Date Range Field with either one input using SingleInputDateRangeField or two inputs using MultiInputDateRangeField as show below.

—

<MultiInputDateRangeField
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>
<SingleInputDateRangeField
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

<MultiInputDateRangeField
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>
<SingleInputDateRangeField
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled.

Uncontrolled field

Controlled field

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

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

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.