Skip to content
Holm Digital logotyp

Date Picker

A custom W3C APG dialog-grid calendar component for selecting a single date. Full keyboard navigation, screen reader support, and locale-aware formatting.

Date pickers are often a huge accessibility hurdle. Our DatePicker ships the full W3C APG dialog + grid pattern with a custom calendar — no <input type="date"> — so behaviour is consistent across browsers and assistive tech.

Accessibility Features

  • APG dialog + grid: The calendar is a role="dialog" popup containing a role="grid" of date cells. Today is marked with aria-current="date", the selected cell with aria-selected="true", and cells outside minDate/maxDate with aria-disabled.
  • Grid Navigation: Arrow keys move day-by-day, Home/End jump to the first/last day of the week, PageUp/PageDown move by month, and Shift+PageUp/Shift+PageDown move by year.
  • Focus trap: The calendar popup traps focus while open and returns it to the trigger on close — including on Escape (with stopPropagation so it does not also close a parent dialog).
  • Live-region announcement: Commit (Enter / Space / click) fires a polite announcement of the selected date in the configured locale.
  • Themable: Co-located DatePicker.css exposes CSS custom properties (--hd-datepicker-today-bg, --hd-datepicker-selected-bg, --hd-datepicker-focus-ring, …). Import via '@holmdigital/components/DatePicker.css'.

Usage Example

v0.7 BREAKING: value is now Date (was string) and onChange receives a Date object (no longer a native input event).

import { DatePicker } from '@holmdigital/components'; import '@holmdigital/components/DatePicker.css'; const [date, setDate] = useState<Date | undefined>(); <DatePicker label="Select appointment date" value={date} onChange={setDate} minDate={new Date()} locale="sv-SE" />
Next →Introduction