A trigger button that opens a Calendar in a popover. Same
value/defaultValue/onChange shape as Calendar itself — picking a date closes the popover.
tsx
<DatePicker label="Due date" />label
DatePicker vs. Calendar
Reach for Calendar when the grid should stay visible — a scheduling view, a form where the date is
the main thing being edited. DatePicker fits it into a normal field-sized form row instead, the way
Combobox fits a long option list into a single input.
Examples
Uncontrolled, with a starting value:
tsx
<DatePicker label="Due date" defaultValue={new Date(2026, 7, 15)} />minDate/maxDate pass straight through to the inner Calendar:
tsx
<DatePicker
label="Delivery date"
minDate={new Date(2026, 7, 1)}
maxDate={new Date(2026, 7, 31)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | text | — | — |
| defaultValue | readonly | — | — |
| description | text | — | — |
| disabled | boolean | — | — |
| error | text | — | — |
| formatDate | readonly | `Intl.DateTimeFormat` with `dateStyle: "medium"` | Overrides the trigger's date formatting. |
| label | text | — | — |
| maxDate | readonly | — | — |
| minDate | readonly | — | — |
| onChange | readonly | — | — |
| placeholder | text | "Pick a date" | — |
| success | text | — | — |
| value | readonly | — | — |
| weekStartsOn | readonly | 0 (Sunday) | — |