DatePicker

A date field with a button that opens a calendar dialog.

Import
import { DatePicker } from '@texuli/primitives/date-picker';
Pattern
Date picker dialog (WAI-ARIA APG)
Size budget
29.0 KiB gzip for @texuli/primitives/date-picker
Reference
packages/primitives/docs/prim-date-picker.md

Live demo

Loading the DatePicker demo…

Anatomy

DatePicker anatomy: each box holds the parts inside it.
  • DatePicker.Root
    • DatePicker.Field
    • DatePicker.Trigger
    • DatePicker.Content
      • DatePicker.Calendar

DateRangePicker has the same parts with start and end fields and a range Grid.

Behavior checks

tests/behavior/scenarios/date-picker.spec.ts runs 11 rows against the DatePicker scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 11 rows
  1. the calendar button is collapsed, then expanded while its calendar is open
  2. opening the calendar focuses the selected date in a grid named by its month
  3. the calendar is a dialog named for choosing the date (APG date picker dialog)
  4. arrows move by day, Enter chooses: the dialog closes, the field updates, focus returns
  5. PageDown moves a month and the grid follows
  6. Escape closes without choosing and returns focus to the button
  7. a click or tap on a day chooses it
  8. changing the day in the field moves the calendar selection
  9. a pointer press outside closes the calendar
  10. a range: Enter picks the start, arrows and Enter the end; the days between are selected
  11. the open date picker has no axe violations

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 29.0 KiB gzip for @texuli/primitives/date-picker (pnpm size).
  • Open-to-focus: p75 at most 50 ms (asserted with TEXULI_PERF=1).