Menu
Use when implementing select dates from a calendar interface.
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/thedaviddias/ux-patterns-for-developers --skill date-pickerThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Showing SKILL.md
| name | date-picker |
| description | Use when implementing select dates from a calendar interface. |
| metadata | {"id":"date-picker","category":"forms","pattern":"Date Picker","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/forms/date-picker","sourcePath":"apps/web/content/patterns/forms/date-picker.mdx"} |
Select dates from a calendar interface
A Date Picker is a form component that combines a text input (showing the selected date) with a calendar overlay that allows users to visually browse and select a date. The calendar provides context about surrounding dates, days of the week, and time-relative positioning that a plain text input cannot offer. Unlike a Date Input (which is optimized for direct keyboard entry of known dates), a Date Picker is designed for situations where the user benefits from seeing the calendar — scheduling appointments, choosing a future delivery date, or selecting from a constrained set of available days.
<input type="date"> opens the platform's native picker; a custom calendar may be redundant.references/pattern.md, then choose the smallest viable variation.| Key | Action |
|---|---|
Enter / Space | Opens calendar when on the trigger button; selects focused date |
Escape | Closes the calendar and returns focus to the trigger |
Arrow Right | Moves focus to the next day |
Arrow Left | Moves focus to the previous day |
Arrow Down | Moves focus to the same day next week |
Arrow Up | Moves focus to the same day previous week |
Home | Moves focus to the first day of the current week |
The Problem: Opening the calendar automatically when the text input gains focus is disruptive for keyboard users navigating through a form and for users who prefer to type dates directly.
How to Fix It? Open the calendar only when the calendar icon button is activated.
// Bad
dateInput.addEventListener('focus', openCalendar);
// Good
calendarButton.addEventListener('click', toggleCalendar);
calendarButton.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleCalendar();
}
});
The Problem: A calendar that requires mouse interaction is inaccessible to keyboard and screen reader users. How to Fix It? Implement the full ARIA grid keyboard navigation pattern.
calendarGrid.addEventListener('keydown', (e) => {
const focused = document.activeElement;
switch (e.key) {
case 'ArrowRight': focusDay(getNextDay(focused)); break;
case 'ArrowLeft': focusDay(getPrevDay(focused)); break;
case 'ArrowDown': focusDay(getNextWeek(focused)); break;
case 'ArrowUp': focusDay(getPrevWeek(focused)); break;
case 'Home': focusDay(getFirstDayOfWeek(focused)); break;
case 'End': focusDay(getLastDayOfWeek(focused)); break;
case 'PageUp': navigateToPrevMonth(); break;
case 'PageDown': navigateToNextMonth(); break;
case 'Escape': closeCalendar(); break;
}
});
The Problem:
When the calendar closes (after date selection or Escape), focus disappears or jumps to the top of the page.
How to Fix It? Always return focus to the trigger element.
function closeCalendar() {
calendarPopup.hidden = true;
calendarButton.setAttribute('aria-expanded', 'false');
calendarButton.focus(); // Always return focus
}
For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/forms/date-picker