Date Picker
Field that opens a calendar to pick one date.
@paneui/theme@paneui/icons@paneui/control-size@paneui/calendar@paneui/popover@paneui/select@paneui/locale-provider@base-ui/react
Installation
pnpm dlx shadcn@latest add @paneui/date-pickerUsage
Examples
Behaviour
Picking a date closes the popup and returns focus to the trigger; pass keepOpen to leave it open. Inside a sized Field the trigger follows the field's size.
DatePicker
Every Calendar prop except mode passes through to the calendar. Also accepts every prop of Calendar.
- value
- Date | null
- Controlled date.
- onValueChange
- (date: Date | null) => void
- Called when a date is picked.
- placeholder= "Pick a date"
- string
- Trigger text with no date.
- formatOptions= { dateStyle: "medium" }
- Intl.DateTimeFormatOptions
- How the date reads on the trigger.
- size= "default"
- "xs" | "sm" | "default" | "lg"
- Trigger height (24 / 28 / 32 / 36px).
- keepOpen= false
- boolean
- Stay open after a pick.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | null | — | Controlled date. |
| onValueChange | (date: Date | null) => void | — | Called when a date is picked. |
| placeholder | string | "Pick a date" | Trigger text with no date. |
| formatOptions | Intl.DateTimeFormatOptions | { dateStyle: "medium" } | How the date reads on the trigger. |
| size | "xs" | "sm" | "default" | "lg" | "default" | Trigger height (24 / 28 / 32 / 36px). |
| keepOpen | boolean | false | Stay open after a pick. |