Date Picker
A field that opens a month calendar for choosing a single date. Today has an outline, the selected day is filled, days outside the month are muted and unavailable days are disabled.
Field and calendar
Past days are disabled in this example.
October 2026
MoTuWeThFrSaSu
<DatePicker value={date} onChange={setDate} isDisabled={(d) => d < today} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | null | — | Selected date. |
onChange | (d: Date) => void | — | Handler. |
isDisabled | (d: Date) => boolean | — | Marks days unavailable. |
placeholder | string | "Pick a date" | Empty text. |