Date Picker

A date input with a calendar popup that supports keyboard navigation, manual text entry, and accessible date selection.

Demo

Type a date directly into the text field, or activate the calendar button to open the popup. Inside the calendar, use Left and Right arrows to move between days, Up and Down arrows to move between weeks, Page Up and Page Down to navigate months, and Enter or Space to select the focused date. Press Escape to close the calendar without selecting.

Select a date

Format: YYYY/MM/DD

What to Observe

The calendar popup opens and receives focus automatically so keyboard users land in the correct location.
The currently focused date is announced by screen readers with its full name, including day of week, day, month, and year.
Navigation controls (previous month, next month) have descriptive accessible names, not just arrow symbols.
Selecting a date closes the calendar and populates the text input, with confirmation available to assistive technology.
The calendar is dismissed cleanly with Escape, returning focus to the trigger button.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

Text input — The editable field where users can type a date directly; labeled with a visible <label> element.
Calendar toggle button — A button that opens and closes the calendar popup; communicates popup state via aria-expanded.
Calendar dialog — The popup container marked with role="dialog" and an accessible name that identifies it as a date picker.
Month/year header — The heading inside the calendar that announces the currently displayed month and year.
Day grid — A grid of day cells, each representing a selectable date with a full accessible label.
Navigation buttons — Previous and next controls for advancing through months, with clearly descriptive labels.

Accessibility Behavior

The calendar popup must receive focus immediately when opened so keyboard users do not have to search for it.
Each day cell must have an accessible name that includes the complete date — not just the day number — so screen readers can announce it meaningfully.
The keyboard interaction pattern must follow the grid navigation model: arrow keys move between days, and Tab moves between the calendar controls.
The currently focused date must be visually distinct and programmatically indicated as the active element.
Today's date must be distinguishable from other dates for both sighted users and assistive technology users.
Pressing Escape must close the calendar and return focus to the trigger button without losing the previously selected value.

Common Mistakes

Opening the calendar popup without moving focus into it, leaving keyboard users stranded outside the widget.
Labeling day cells with only the number (for example, "15") instead of the full date, so screen readers announce meaningless single digits.
Building the day grid with <div> elements and click handlers only, with no keyboard navigation or ARIA grid semantics.
Not restoring focus to the trigger button when the calendar is dismissed, causing keyboard users to lose their place in the page.
Using icon-only navigation buttons (prev/next chevrons) without accessible names, so their purpose is unknown to screen reader users.

Why This Matters

Date pickers appear in booking flows, form submissions, scheduling tools, and profile settings — moments where users must provide precise information to complete a task. An inaccessible calendar forces screen reader users to abandon the widget and fall back on a plain text field with no format guidance, or to give up entirely. For users with motor disabilities who rely on keyboard navigation, a date picker with no arrow-key support is simply inoperable. Getting this component right is essential for any product where date entry is part of a critical path.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.