Date Range Calendar

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

Basic usage

May 2023

SMTWTFS

June 2023

SMTWTFS

<DateRangeCalendar />

<DateRangeCalendar />

Press Enter to start editing

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

<DemoItem label="Uncontrolled calendar">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  />
</DemoItem>
<DemoItem label="Controlled calendar">
  <DateRangeCalendar
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

<DemoItem label="Uncontrolled calendar">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  />
</DemoItem>
<DemoItem label="Controlled calendar">
  <DateRangeCalendar
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

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

<DemoItem label="disabled">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
    disabled
  />
</DemoItem>
<DemoItem label="readOnly">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
    readOnly
  />
</DemoItem>

<DemoItem label="disabled">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
    disabled
  />
</DemoItem>
<DemoItem label="readOnly">
  <DateRangeCalendar
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
    readOnly
  />
</DemoItem>

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

May 2023

SMTWTFS

2 calendars

May 2023

SMTWTFS

June 2023

SMTWTFS

<DemoItem label="1 calendar">
  <DateRangeCalendar calendars={1} />
</DemoItem>
<DemoItem label="2 calendars">
  <DateRangeCalendar calendars={2} />
</DemoItem>

<DemoItem label="1 calendar">
  <DateRangeCalendar calendars={1} />
</DemoItem>
<DemoItem label="2 calendars">
  <DateRangeCalendar calendars={2} />
</DemoItem>

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

<DateRangeCalendar
  defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  slots={{ day: DateRangePickerDay }}
/>

<DateRangeCalendar
  defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  slots={{ day: DateRangePickerDay }}
/>

Press Enter to start editing

Validation

You can find the documentation in the Validation page.

Localization

You can find the documentation about localization in the Date localization and Component localization.

API

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

<DateRangeCalendar />