Select a single date from a calendar.
123456789101112131415123456789101112131415DatePicker uses Radix UI Popover and react-day-picker, both of which are fully accessible with keyboard navigation, ARIA attributes, and screen reader support.
| Prop | Type | Default | Description |
|---|---|---|---|
mode | "single" | "range" | "single" | Selection mode: single date or date range |
value | Date | { from?: Date; to?: Date } | undefined | — | Selected date or range |
onChange | (date: Date | undefined) => void | (range: { from?: Date; to?: Date } | undefined) => void | — | Callback when date or range changes |
placeholder | string | "Pick a date" | Placeholder text for the input |
disabled | boolean | false | Disable date selection |
minDate | Date | — | Minimum selectable date |
maxDate | Date | — | Maximum selectable date |
className | string | — | Additional CSS classes |