Date Range Picker

The date range picker let the user select a range of dates.

Basic usage

Note that you can pass almost any prop from DatePicker.

Check-in

Check-out

<DateRangePicker
  localeText={{ start: 'Check-in', end: 'Check-out' }}
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(startProps, endProps) => (
    <React.Fragment>
      <TextField {...startProps} />
      <Box sx={{ mx: 2 }}> to </Box>
      <TextField {...endProps} />
    </React.Fragment>
  )}
/>

<DateRangePicker
  localeText={{ start: 'Check-in', end: 'Check-out' }}
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(startProps, endProps) => (
    <React.Fragment>
      <TextField {...startProps} />
      <Box sx={{ mx: 2 }}> to </Box>
      <TextField {...endProps} />
    </React.Fragment>
  )}
/>

Press Enter to start editing

Static mode

It's possible to render any picker inline. This will enable building custom popover/modal containers.

January 2023

SMTWTFS

February 2023

SMTWTFS

<StaticDateRangePicker
  displayStaticWrapperAs="desktop"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(startProps, endProps) => (
    <React.Fragment>
      <TextField {...startProps} />
      <Box sx={{ mx: 2 }}> to </Box>
      <TextField {...endProps} />
    </React.Fragment>
  )}
/>

<StaticDateRangePicker
  displayStaticWrapperAs="desktop"
  value={value}
  onChange={(newValue) => {
    setValue(newValue);
  }}
  renderInput={(startProps, endProps) => (
    <React.Fragment>
      <TextField {...startProps} />
      <Box sx={{ mx: 2 }}> to </Box>
      <TextField {...endProps} />
    </React.Fragment>
  )}
/>

Press Enter to start editing

Responsiveness

The date range picker component is designed to be optimized for the device it runs on.

The MobileDateRangePicker component works best for touch devices and small screens.
The DesktopDateRangePicker component works best for mouse devices and large screens.

By default, the DateRangePicker component renders the desktop version if the media query @media (pointer: fine) matches. This can be customized with the desktopModeMediaQuery prop.

There are certain caveats when testing pickers, please refer to this section for more information.

Mobile start

Mobile end

Desktop start

Desktop end

Form props

The date range picker component can be disabled or read-only.

Disabled start

Disabled end

Read-only start

Read-only end

Validation

You can find the documentation in the Validation page

Different number of months

Note that the calendars prop only works in desktop mode.

1 calendar

Start

End

2 calendars

Start

End

3 calendars

Start

End

Custom input component

You can customize the rendered input with the renderInput prop. For DateRangePicker it takes 2 parameters – for start and end input respectively. If you need to render custom inputs make sure to spread ref and inputProps correctly to the input components.

Customized day rendering

The displayed days are customizable with the Day component slot. You can take advantage of the internal DateRangePickerDay component.

January 2023

SMTWTFS

February 2023

SMTWTFS

<StaticDateRangePicker
  displayStaticWrapperAs="desktop"
  label="date range"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  components={{ Day: DateRangePickerDay }}
  renderInput={(startProps, endProps) => (
    <React.Fragment>
      <TextField {...startProps} />
      <Box sx={{ mx: 2 }}> to </Box>
      <TextField {...endProps} />
    </React.Fragment>
  )}
/>

<StaticDateRangePicker
  displayStaticWrapperAs="desktop"
  label="date range"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  components={{ Day: DateRangePickerDay }}
  renderInput={(startProps, endProps) => (
    <React.Fragment>
      <TextField {...startProps} />
      <Box sx={{ mx: 2 }}> to </Box>
      <TextField {...endProps} />
    </React.Fragment>
  )}
/>

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.