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

Sizes

Use the size prop to change the size of the field. Defaults to "md"

Disabled

Read Only

With Description

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

With Error Message

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

Controlled

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

Time Zones

DateField 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"

Min Date And Max Date

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

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

pnpm add @internationalized/date

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

Hide Time Zone

When a ZonedDateTime object is provided as the value to DateField, the time zone abbreviation is displayed by default. However, if this is displayed elsewhere or implicit based on the usecase, it can be hidden using the hideTimeZone option.

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

pnpm add @internationalized/date

import { parseZonedDateTime } from "@internationalized/date"

Hourly Cycle

By default, DateField displays times in either 12 or 24 hour hour format depending on the user's locale. However, this can be overridden using the hourCycle prop if needed for a specific usecase. This example forces DateField to use 24-hour time, regardless of the locale.

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

Slots

• base: Input wrapper, it handles alignment, placement, and general appearance.
• label: Label of the date-input, it is the one that is displayed above, inside or left of the date-input.
• input: The date-input element.
• description: The description of the date-input.
• error: The error message of the date-input.