Skip to content

Date Range Picker

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

Basic usage

Press Enter to start editing

Component composition

The component is built using the MultiInputDateRangeField for the keyboard editing and the DateRangeCalendar for the view editing. All the documented props of those two components can also be passed to the Date Range Picker component.

Check-out their documentation page for more information:

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled.

Uncontrolled picker

Controlled picker

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 allows editing values directly inside the field.

  • 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 directly inside 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

Mobile variant

Responsive variant

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 can be disabled or read-only.

disabled

readOnly

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

2 calendars

3 calendars

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
March 2023
SMTWTFS
April 2023
SMTWTFS

Validation

You can find the documentation in the Validation page

🚧 Month Range Picker

The Month Range Picker allows setting 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.