Date picker

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-date-picker label="Session date" name="session" locale="en-GB"
  value="2026-09-28" min="2026-09-01" disabled-weekdays="0"></tui-date-picker>

<!-- A range: posts "2026-10-05/2026-10-09". -->
<tui-date-picker label="Hold Studio B" name="hold" mode="range"></tui-date-picker>

import '/kit/kit.mjs';   // defines <tui-date-picker> and <tui-calendar>

const picker = document.querySelector('tui-date-picker[name="session"]');
picker.addEventListener('change', () => price(picker.value));   // "2026-09-28"
picker.show();    // slide the card out from code
picker.close();

Needs kit.css and kit.mjs. How to install the kit.

• 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.

A custom element that writes a .tui-field (label, a recessed well holding the input and a small calendar key, a hint, a hidden ISO input) and a card holding a <tui-calendar>. Reading a typed date asks Intl for the locale’s order of day, month and year and for its month names (long and short, accents folded, English as a fallback), then checks the date is real; ranges are split on a dash or “to”, and missing months or years are borrowed from the other half, so Intl’s own range output (“10–14 Sept 2026”, “Sep 10 – 14, 2026”) reads back. The card slides out of the slot top first (a clip and a 10px drop over 200ms) and keeps an inner shadow on its top edge where the slot shades it.