DatePicker
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Loading…
Standalone Calendar#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Date | undefined | — | |
| defaultValue | Date | undefined | — | |
| onValueChange | ((value: Date) => void) | undefined | — | |
| placeholder | string | undefined | Pick a date | |
| format | ((date: Date) => string) | undefined | (d: Date) => d.toLocaleDateString() | Format the selected date for display. Default: `toLocaleDateString()`. |
| isDateDisabled | ((date: Date) => boolean) | undefined | — | Optional disable predicate forwarded to Calendar. |
| width | string | number | undefined | 200 | Pixel width of the trigger button. Default 200. |
| disabled | boolean | undefined | — | |
| emptyLabel | ReactNode | — | Content for the trigger when no date is selected. Defaults to `placeholder`. |
| aria-label | string | undefined | — | |
| id | string | undefined | — | |
| name | string | undefined | — |