DatePicker

A field-like trigger that opens Calendar in a popover, with localized formatting and form support.

Due date

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add date-picker

Dependencies

What add date-picker installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

Examples

4 examples · 1 component

Due date

With a label

The visible label names the trigger; picking a date closes the popover.

Stay

Date range

Two months side by side; it closes once both ends are chosen.

Form with help and error

Submits YYYY-MM-DD through name; help and error text are linked with aria-describedby.

Localized

Spanish locale for the calendar and a long Intl format in the trigger.

API reference

Keeps the props of react-day-picker, plus ZUNO's styles; the table lists the ones you use most.

Prop	Type	Default
`value / defaultValue` Selected date, controlled or uncontrolled.	`Date`	—
`onValueChange` Called on select; the popover closes after a date is chosen.	`(date?: Date) => void`	—
`name` Submits YYYY-MM-DD through a hidden input for native forms (DatePicker only).	`string`	—
`placeholder` Trigger text when empty.	`string`	`"Pick a date"`
`locale` date-fns locale from react-day-picker/locale; used by the calendar and the trigger text.	`Locale`	`en-US`
`formatOptions` How the trigger shows the date.	`Intl.DateTimeFormatOptions`	`{ dateStyle: "medium" }`
`calendarProps` Passed to Calendar: disabled, startMonth, endMonth, numberOfMonths…	`DayPickerProps`	—
`aria-invalid / aria-describedby` Error state and the id of help or error text.	`boolean / string`	—
`DateRangePicker` Same API for ranges; two months, closes when both ends are set and shows the range with Intl formatRange.	`value: DateRange`	—

States

The states that apply to this component and their visual treatment.

State	Treatment
Empty	Muted placeholder text.
Filled	The date formatted with Intl in the given locale.
Open	Calendar in a popover, focused on the selected day or today.
Range in progress	Shows "start – …" until the end is chosen.
Invalid	aria-invalid paints the border destructive; pair it with an error message.
Disabled	Dimmed; the popover does not open.

Accessibility

The trigger is a button labelled by its Label (htmlFor/id) and announces the chosen date as its text; it exposes aria-expanded and aria-haspopup.

Opening moves focus into the calendar grid on the selected day or today; choosing a date closes the popover and returns focus to the trigger. Escape closes without changes.

Point aria-describedby at the format help or the error message and set aria-invalid when it fails, so both are announced with the field.

The popover is labelled "Choose a date"; everything inside follows Calendar's keyboard model.