Date picker

A date field with its calendar card in a slot underneath: type a date in any common form for your locale, or press the key and the card slides out. Single dates and ranges; shown the Intl way, posted as ISO.

Type “3/10”, “3 Oct” or “2026-10-03” and press Enter — or press the calendar key (Alt+Down) and pick. Escape puts the card back.

• A real text field with a <label>. The calendar key has aria-haspopup="dialog" and aria-expanded; the card is a non-modal role="dialog" with a name.
• Opening moves the focus to the chosen day (or today) in the grid; picking returns it to the field, Escape to the key.
• Errors set aria-invalid and rewrite the hint, which the field points to with aria-describedby, so the reason is read with the field.
• In range mode a polite line in the card says what to pick next: the first day, then the last.