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 DatePicker 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 DatePicker includes time information, time fields will be shown in the DateField.

Selector Icon

You can use the selectorIcon prop to change the icon used for the calendar button.

Controlled

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

Time Zones

DatePicker 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 DatePicker 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, now, 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 Calendar'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

DatePicker 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 { DateValue, now, parseAbsoluteToLocal } from "@internationalized/date"
import { I18nProvider } from "@react-aria/i18n"

Unavailable Dates

DatePicker 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 a single month. You can use the calendarProps#visibleDuration to pass a custom duration to display multiple 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 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 pageBehavior to "visible".

Slots

• base: Input wrapper, it handles alignment, placement, and general appearance.
• group: Wrapper for the input and calendar button.
• calendarButton: The calendar button element.
• selectorIcon: Selector icon element.
• dialog: The calendar dialog container inside the popover element.
• input: The date input component element.

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

Calendar 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.