Date Range Field

The Date Range Field lets 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

MM/DD/YYYY

–

Return

MM/DD/YYYY

Departure - Return

MM/DD/YYYY – MM/DD/YYYY

<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

04/17/2022 – 04/21/2022

Controlled field

04/17/2022 – 04/21/2022

<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

Localization

See the Date format and localization and Translated components documentation pages for more details.

Validation

See the Validation documentation page for more details.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.