Skip to content
Edit this page

Date Range Picker ⚡️

Date pickers let the user select a range of dates.

⚠️ Pro component

The date range picker is intended for Material-UI X Pro, a commercial set of advanced components built on top of the community edition (MIT license).

This paid extension will include more advanced components (rich data grid, date range picker, tree view drag & drop, etc.). Early access starts at an affordable price.

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

Requirements

This component relies on the date management library of your choice. It supports date-fns, luxon, dayjs, moment and any other library via a public dateAdapter interface.

Please install any of these libraries and set up the right date engine by wrapping your root (or the highest level you wish the pickers to be available) with LocalizationProvider:

// or @material-ui/lab/dateAdapter/{dayjs,luxon,moment} or any valid date-io adapter
import DateFnsAdapter from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';

function App() {
  return (
    <LocalizationProvider dateAdapter={DateFnsAdapter}>...</LocalizationProvider>
  );
}

Basic usage

Note that you can pass almost any prop from DatePicker.

to

Static mode

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

July 2021
August 2021
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <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>
    )}
  />
</LocalizationProvider>

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. This can be customized with the desktopModeMediaQuery prop.

to
to

Form props

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

to
to

Different number of months

Note that the calendars prop only works in desktop mode.

1 calendar

to

2 calendars

to

3 calendars

to

Disabling dates

Disabling dates behaves the same as the simple DatePicker.

to

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.

to 
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <DateRangePicker
    label="Advanced keyboard"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <input ref={startProps.inputRef} {...startProps.inputProps} />
        <Box sx={{ mx: 1 }}> to </Box>
        <input ref={endProps.inputRef} {...endProps.inputProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

Customized day rendering

The displayed days are customizable with the renderDay function prop. You can take advantage of the internal DateRangePickerDay component.

July 2021
August 2021
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticDateRangePicker
    displayStaticWrapperAs="desktop"
    label="date range"
    value={value}
    onChange={(newValue) => setValue(newValue)}
    renderDay={renderWeekPickerDay}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} />
        <Box sx={{ mx: 2 }}> to </Box>
        <TextField {...endProps} />
      </React.Fragment>
    )}
  />
</LocalizationProvider>

API