Date Picker
A field that opens a calendar in a popover, or a bottom sheet on phones.Basic
Preview
Code
We remind you a day before.
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { DatePicker, Field } from '@advui/core'
<Field label="Due date">
<DatePicker value={due} onValueChange={setDue} min={new Date()} />
</Field>API reference
DatePicker
Also takes Calendar’s `min`, `max`, `isDateDisabled`, `weekStartsOn` and `locale`.| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | null | — | The picked day. |
defaultValue | Date | null | — | Starting `value` when uncontrolled. |
onValueChange | (value: Date | null) => void | — | Called when a day is picked; the panel then closes. |
open | boolean | — | Open state of the panel. |
defaultOpen | boolean | — | Starting `open` when uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called with the new `open`. |
placeholder | string | 'Pick a date' | Shown while empty. |
formatOptions | Intl.DateTimeFormatOptions | { dateStyle: 'medium' } | How the day is written in the field. |
title | string | 'Choose a date' | Title of the panel, which names it for screen readers. |
size | 'sm' | 'md' | 'lg' | 'md' | As Input. |
invalid | boolean | false | Error styling and `aria-invalid`. |
disabled | boolean | false | Not focusable or editable. |
Accessibility
- The field is a button with
aria-haspopup="dialog"; a Field’s label names it, and the picked date is linked as its description. - The panel is a dialog named by its title. Focus moves into it and returns to the field when it closes.
- The calendar inside follows the WAI-ARIA grid pattern (see Calendar).
| Key | Action |
|---|---|
| Enter / Space | Opens the calendar (on the field). |
| Escape | Closes it without changing the date. |
Platform notes
iOS
Opens as a bottom sheet.
Android
Opens as a bottom sheet; the back button closes it.