Components
Calendar & Date Picker
An internationalized month grid and segmented date field with timezone-safe CalendarDate values.
Calendar
August 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
26 | 27 | 28 | 29 | 30 | 31 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 1 | 2 | 3 | 4 | 5 |
const [date, setDate] = useState(parseDate("2026-08-12"));
<Calendar value={date} onValueChange={setDate} />
<output>Selected: {date.toString()}</output>Date picker
DatePicker adds locale-aware editable segments and composes the same keyboard-navigable calendar into its popover.
Due date
8122026
<DatePicker label="Due date" defaultValue={parseDate("2026-08-12")} />