Date & time
The date and time behaviours. Calendar is the month grid; DatePicker is a Calendar in a popover; TimeInput is a thin wrapper over the native time input.
The pieces
| Component | Use it for |
|---|---|
| Calendar | An always-visible month grid with keyboard navigation. |
| DatePicker | A Calendar opened from a trigger via a popover. |
| TimeInput | A native time input, minute or second precision. |
Calendar, picked or shown
Calendar is the grid — a focusable month with full keyboard navigation, locale-aware labels, and selectable days. DatePicker wraps it: a trigger button, a Popover, and a Calendar inside. Reach for Calendar when the grid should always be on screen — a booking view, a date-range tool — and DatePicker when a date is one field among many.
TimeInput is deliberately small. It wraps the platform <input type="time">, which already gives
a tested, accessible time control; the wrapper only adds the precision convenience.
A note on date math
The current implementation uses the platform Date directly, with Intl.DateTimeFormat for
locale-aware weekday and month labels. A future release may move to Temporal for cleaner
timezone handling — the component API is designed to survive that change.