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.

Departure

–

Return

Departure - Return

<MultiInputDateRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'Departure' : 'Return',
    }),
  }}
/>
<SingleInputDateRangeField label="Departure - Return" />

<MultiInputDateRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'Departure' : 'Return',
    }),
  }}
/>
<SingleInputDateRangeField label="Departure - Return" />

Press Enter to start editing

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled field

Controlled field

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

<SingleInputDateRangeField
  label="Uncontrolled field"
  defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
/>
<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.