Skip to content
+

Date Range Picker

The Date Range Picker lets the user select a range of dates.

Basic usage

MM/DD/YYYY – MM/DD/YYYY
Press Enter to start editing

Component composition

The component is built using the SingleInputDateRangeField for the keyboard editing and the DateRangeCalendar for the view editing.

Check-out their documentation page for more information:

You can check the available props of the combined component on the dedicated API page. Some SingleInputDateRangeField props are not available on the Picker component, you can use slotProps.field to pass them to the field.

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled picker

04/17/2022 – 04/21/2022

Controlled picker

04/17/2022 – 04/21/2022
Press Enter to start editing

Available components

The component is available in four variants:

  • The DesktopDateRangePicker component which works best for mouse devices and large screens. It renders the views inside a popover and a field for keyboard editing.

  • The MobileDateRangePicker component which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values with the keyboard in the field.

  • The DateRangePicker component which renders DesktopDateRangePicker or MobileDateRangePicker depending on the device it runs on.

  • The StaticDateRangePicker component which renders without the popover/modal and field.

Desktop variant

04/17/2022 – 04/21/2022

Mobile variant

04/17/2022 – 04/21/2022

Responsive variant

04/17/2022 – 04/21/2022

Static variant

Select date range
 – 
SMTWTFS

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.

Form props

The component supports the disabled, readOnly and name form props:

MM/DD/YYYY – MM/DD/YYYY
MM/DD/YYYY – MM/DD/YYYY
MM/DD/YYYY – MM/DD/YYYY
Press Enter to start editing

Customization

Render 1 to 3 months

You can render up to 3 months at the same time using the calendars prop.

1 calendar

MM/DD/YYYY – MM/DD/YYYY

2 calendars

MM/DD/YYYY – MM/DD/YYYY

3 calendars

MM/DD/YYYY – MM/DD/YYYY
Press Enter to start editing

Use a multi input field

You can pass the MultiInputDateRangeField component to the Date Range Picker to use it for keyboard editing.

MM/DD/YYYY

–

MM/DD/YYYY
Press Enter to start editing

Add shortcuts

To simplify range selection, you can add shortcuts.

Select date range
 – 
  • This Week
  • Last Week
  • Last 7 Days
  • Current Month
  • Next Month
  • Reset
June 2025
SMTWTFS
July 2025
SMTWTFS

Customize the field

You can find the documentation in the Custom field page.

Localization

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

Validation

See the Validation documentation page for more details.

Month Range Picker 🚧

The Month Range Picker would let users select a range of months.

API

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