DatePicker
A button trigger opens a dialog with an embedded Calendar. Picking a day writes the ISO date to a hidden input, shows the long-form date on the trigger, and dispatches an ink:date:change event.
Example
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
<DatePicker
id="departure"
label="Departure date"
name="departure"
month="2026-09"
locale="en-GB"
/>The locale is set so day names render in English (formatLong follows the runtime default locale otherwise). Omit month to open on the selected value, or on today.
Constrained range
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
<DatePicker
id="return"
label="Return date"
name="return"
month="2026-12"
min="2026-12-20"
max="2026-12-31"
locale="en-GB"
/>Days outside min/max render disabled inside the popup. For a booking form that forbids the past, passmin as today in YYYY-MM-DD form.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Required. Names Field/panel/message ids (trigger itself carries no id). |
label | string | - | Visible label; kept in the trigger name and dialog name. |
name | string | id | Hidden-input form name; carries the ISO date. |
value | string (ISO) | - | Preselected date; unknown strings select nothing. |
min | string (ISO) | - | Earliest selectable date; earlier days render disabled. |
max | string (ISO) | - | Latest selectable date; later days render disabled. |
month | string ("YYYY-MM") | - | Initial popup month; falls back to the value month, then today. |
locale | string | - | BCP 47 locale for day and month names; runtime default when omitted. |
placeholder | string | "Select {label}" (lowercased) | Empty-state trigger text; pass placeholder to override. |
hideValue | boolean | false | Skips the hidden input; composition API for a combined date-time field, which owns the value. |
hint | string | - | Help text below the trigger. |
error | string | - | Error message; sets aria-invalid on the trigger. |
required | boolean | false | Marks the label required. |
disabled | boolean | false | Non-interactive; trigger cannot open. |
class | string | - | Style passthrough. |
Accessibility
- Trigger keeps the label in its accessible name, with
aria-haspopup="dialog",aria-expanded,aria-controls. It is a native button, so it stays keyboard-focusable. - Panel is a
dialognamed"{label} options"holding the embedded Calendar (same table-of-buttons keyboard map as Calendar) plus a"Clear"button. - Opening moves focus to the current day; Escape closes and refocuses the trigger; clicking outside closes.
- Hint and error connect via
aria-describedby; error setsaria-invalid="true"on the trigger. - Selection and Clear dispatch
ink:date:changewith{ value }(ISO string, empty when cleared).