Calendar

Pick one date from a month table of buttons, with arrow-key travel and month paging. The selected ISO date syncs to a hidden input for forms, and every select or clear dispatches anink:calendar:change event.

Example

Choose a date

September 2026

<Calendar
  id="depart-cal"
  name="depart"
  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.

Preselected with min and max

Choose a date

December 2026

<Calendar
  id="return-cal"
  name="return"
  month="2026-12"
  value="2026-12-25"
  min="2026-12-20"
  max="2026-12-31"
  locale="en-GB"
/>

Days outside min/max render disabled, as do the out-of-month filler days. Clicking the selected day again clears the value (hidden input empties, event fires with null). A garbage month falls back to the value month, then today.

Props

Prop	Type	Default	Description
`id`	`string`	-	Required. Names the Field label wrapper.
`label`	`string`	`"Choose a date"`	Visible label; also names the date table.
`name`	`string`	-	Hidden-input form name; carries the ISO date. No hidden input when omitted.
`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 visible month; garbage falls back to value, then today.
`locale`	`string`	-	BCP 47 locale for day and month names; runtime default when omitted.
`rangeStart`	`string` (ISO)	-	Range start for in-painting; paints the day selected. Composition API for a range picker, which owns the range state.
`rangeEnd`	`string` (ISO)	-	Range end for in-painting; paints the day selected. Days strictly between gain the in-range class and `", in selected range"` label suffix.
`class`	`string`	-	Style passthrough.

Accessibility

Native table of buttons (documented table-of-buttons pattern, not a grid role). Each day button carries the full date in its aria-label, plus a ", selected" suffix when selected.
Selected day uses aria-current="date" only when it is today; selection is otherwise shown via class and label.
Month heading sits in an aria-live="polite" region; prev/next buttons are named "Previous month" / "Next month"; the "Today" button jumps back and focuses today.
Keyboard (roving tabindex over enabled days): Left/Right ±1 day, Up/Down ±1 week, Home/End start/end of week, PageUp/PageDown ±1 month (Shift: ±1 year), Enter/Space select or clear. Travel stops at disabled days and month boundaries.
Selection dispatches ink:calendar:change with { value } (string | null).

Mon	Tue	Wed	Thu	Fri	Sat	Sun

Mon	Tue	Wed	Thu	Fri	Sat	Sun