Skip to content
+

Date Range Calendar

The Date Range Calendar lets the user select a range of dates without any input or popper / modal.

Basic usage

June 2024
SMTWTFS
July 2024
SMTWTFS
Press Enter to start editing

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled calendar

April 2022
SMTWTFS
May 2022
SMTWTFS

Controlled calendar

April 2022
SMTWTFS
May 2022
SMTWTFS
Press Enter to start editing

Form props

The component can be disabled or read-only.

disabled

April 2022
SMTWTFS
May 2022
SMTWTFS

readOnly

April 2022
SMTWTFS
May 2022
SMTWTFS
Press Enter to start editing

Customization

Choose the months to render

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

1 calendar

SMTWTFS

2 calendars

June 2024
SMTWTFS
July 2024
SMTWTFS
Press Enter to start editing

You can choose the position the current month is rendered in using the currentMonthCalendarPosition prop. This can be useful when using disableFuture to render the current month and the month before instead of the current month and the month after.

May 2024
SMTWTFS
June 2024
SMTWTFS
Press Enter to start editing

Custom day rendering

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

April 2022
SMTWTFS
May 2022
SMTWTFS
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.