# Date Picker

> A transit-timetable date picker with full keyboard grid navigation, typed-date entry with inline validation, min and max bounds, disabled-day skipping, and a labelled, live-announced month heading — token-driven and design-system agnostic.

- Category: Input
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Roastery
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: keyboard
- Page: https://builder.atheros.ai/components/date-picker
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_date_picker/preview-33de1621af8b.webp

## Features

- Locale-aware weeks make Home and End follow the configured first day of the week.
- Full keyboard grid: arrows move day focus, PageUp/PageDown change month, Shift+PageUp/PageDown change year, Home/End jump to week bounds, Enter selects, Escape closes to the field
- `role="grid"` with `gridcell` buttons, `aria-selected` state, and a labelled month heading that announces on change via `aria-live`
- Typed-date entry parsed inline (`YYYY-MM-DD`) with a live-announced error message and no crash on bad input
- Minimum and maximum date bounds with disabled days that are visually dimmed and skipped during keyboard navigation
- Today marked with `aria-current="date"` and a signal dot; a distinct selected-day fill
- Month and year fast-navigation buttons plus a Today and Clear shortcut
- Delegated grid listeners and `esc()`-escaped rendering for safe, efficient updates
- Smooth transform-based reveal and per-row slide that honor reduced motion

## Accessibility

- **Grid semantics** — Calendar uses `role="grid"`, rows use `role="row"`, days are `role="gridcell"` buttons with `aria-selected`
- **Month heading** — `#dp-title` is `aria-live="polite"` and labels the grid via `aria-labelledby`
- **Today** — The current day carries `aria-current="date"`
- **Disabled days** — Out-of-range days set `aria-disabled` and `disabled` and are skipped by keyboard navigation
- **Typed errors** — Invalid input sets `aria-invalid` and announces via a `role="alert"` live region wired with `aria-describedby`
- **ARIA labels** — Trigger, month, and year nav buttons have descriptive `aria-label` values; day buttons expose the full date
- **Keyboard nav** — Full grid navigation with arrows, Page keys, Home/End, Enter, and Escape
- **Reduced motion** — `prefers-reduced-motion: reduce` disables the reveal and slide

## Keyboard shortcuts

- `ArrowLeft / ArrowRight` — Move focus one day back / forward
- `ArrowUp / ArrowDown` — Move focus one week back / forward
- `Home / End` — Jump to the first / last day of the focused week
- `PageUp / PageDown` — Previous / next month
- `Shift + PageUp / PageDown` — Previous / next year
- `Enter / Space` — Select the focused day
- `Escape` — Close the calendar and refocus the field
- `ArrowDown (in field)` — Open the calendar from the text field

## Common questions

**Which frameworks is Date Picker available in?**

Date Picker ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Date Picker input component free?**

Date Picker is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Date Picker support dark mode?**

Yes. Date Picker ships light and dark themes, both drawn from the Roastery design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Date Picker live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/date-picker

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt