There is not much change in this component as compared to react-aria-components's export. You can refer to the official documentation for more details.

Usage

Disabled

Read Only

Required

With Description

You can add a description to the DateRangePicker by passing the description property.

With Error Message

You can combine the isInvalid and errorMessage properties to show an invalid input.

With Time Fields

If the value (or defaultValue) given to DateRangePicker includes time information, time fields will be shown in the DateFields.

Controlled

You can use the value and onChange properties to control the input value.

Time Zones

DateRangePicker is timezone aware when a ZonedDateTime object is provided as the value. In this case, the time zone abbreviation is displayed, and time zone concerns such as daylight saving time are taken into account when the value is manipulated.

@internationalized/date includes functions for parsing strings in multiple formats into ZonedDateTime objects.

pnpm add @internationalized/date

import { parseZonedDateTime } from "@internationalized/date"

Granularity

The granularity prop allows you to control the smallest unit that is displayed by DateRangePicker. By default, the value is displayed with "day" granularity (year, month, and day), and CalendarDateTime and ZonedDateTime values are displayed with "minute" granularity.

@internationalized/date includes functions for parsing strings in multiple formats into ZonedDateTime objects.

pnpm add @internationalized/date

import { DateValue, parseAbsoluteToLocal } from "@internationalized/date"
import { useDateFormatter } from "@react-aria/i18n"

Min Date And Max Date

The minValue and maxValue props can also be used to ensure the value is within a specific range.

You may also want to use RangeCalendar's isDateUnavailable (via calendarProps) prop to visually indicate which dates are unavailable for selection in the calendar.

@internationalized/date includes functions for parsing strings in multiple formats into ZonedDateTime objects.

pnpm add @internationalized/date

import { getLocalTimeZone, parseDate, today } from "@internationalized/date"

International Calendar

DateRangePicker supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string, passed to the I18nProvider component.

@internationalized/date includes functions for parsing strings in multiple formats into ZonedDateTime objects.

pnpm add @internationalized/date

import { parseAbsoluteToLocal } from "@internationalized/date"
import { I18nProvider } from "@react-aria/i18n"

Unavailable Dates

DateRangePicker supports marking certain dates as unavailable. These dates cannot be selected by the user and are displayed with a crossed out appearance in the calendar. In the date field, an invalid state is displayed if a user enters an unavailable date.

@internationalized/date includes functions for parsing strings in multiple formats into ZonedDateTime objects.

pnpm add @internationalized/date

import { getLocalTimeZone, isWeekend, today } from "@internationalized/date"
import { useLocale } from "@react-aria/i18n"

Visible Months

By default, the calendar popover displays two months. You can use the calendarProps#visibleDuration to pass a custom duration to display more months at once.

Custom first day of the week

By default, the first day of the week is determined by the user's locale. You can override this using the calendarProps#firstDayOfWeek prop. The available values are 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', and 'sat'.

Page Behavior

By default, when pressing the next or previous buttons, pagination will advance by a single month. This behavior can be changed to page by the visible months instead, by setting calendarProps#pageBehavior to "visible".

Slots

• base: Input wrapper, it handles alignment, placement, and general appearance.
• group: Wrapper for the input fields and calendar button.
• dateWrapper: Wrapper for the two date input fields.
• startInput: The start date input component element.
• connector: The dash connector between the two date inputs.
• endInput: The end date input component element.
• calendarButton: The calendar button element.
• dialog: The calendar dialog container inside the popover element.

You can also override styles of the various components used within DateRangePicker:

RangeCalendar slots

Slots can be overridden via the classNames.calendar prop or calendarProps#classNames prop.

Popover slots

Slots can be overridden via the classNames.popover prop or popoverProps#classNames prop.

FieldError slots

Slots can be overridden via the classNames.error prop.