Date Picker
One of the hardest components to get right, and one where typing is often faster than picking.
Definition
A date picker collects a date, usually offering both a calendar interface and text entry. Calendars are good for choosing relative to other dates; text entry is faster for known dates.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Collecting a date or date range.
- Availability depends on the date.
Common mistakes
- Calendar-only entry for distant dates.
- Ambiguous numeric formats.
- Incomplete keyboard support.
- Locale assumptions about week start and date order.
Requirements
- Always allow typing as well as picking. A birth date is far faster typed than navigated to.
- Accept several input formats and echo back an unambiguous interpretation, such as a written month.
- Disable unavailable dates rather than rejecting them after selection.
- Full keyboard navigation of the calendar grid: arrows for days, Page Up and Page Down for months, Home and End for week boundaries.
- Announce the focused date, its availability and the visible month to assistive technology.
- Respect locale for first day of week, month names and date order.
- For ranges, make the two ends independently editable and show the selected span clearly.
Entry, parsing and ranges
Do
- Let people type as well as pick, and accept several formats.
- Echo the interpreted date back in an unambiguous form, such as 3 March 2026.
- Show which dates are unavailable, and say why.
- Support keyboard navigation of the calendar grid, with the current date announced.
Do not
- Force a picker for a date the reader knows, such as a birthday.
- Present a calendar for something decades in the past, so the reader pages back forty times.
- Use a purely numeric format, where 03/04 means two different days in two markets.
- Allow an end date before the start date, then explain the error afterwards.
In practice
- i.
Typing beats picking for known dates
BirthdaysA picker opening at the current month makes entering a date of birth a paging exercise. Three typed fields, or a single parsed text input, are faster for every reader who already knows the answer.
- ii.
The ambiguous slash
Format03/04/2026 is the third of April in one market and the fourth of March in another, and nothing in the number says which. Echoing the parsed date in words is the only reliable confirmation.
Local chart
CMP·009 · Region III · Grid E2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Error PreventionHEUR·005 · Heuristic
- Postel's LawLAW·012 · Law
- ConstraintsPRIN·009 · Principle
Depends on
Get these right first, or this one will not hold.
- Keyboard NavigationA11Y·002 · Accessibility
Often used with
These usually appear in the same screen or the same decision.
- Input ValidationPAT·007 · Pattern
Check your work
Review passes that test whether this was done properly.
- Form UX ChecklistCHK·001 · Checklist
Related concept
Connected closely enough to change how you apply this.
- InternationalizationWRT·006 · UX writing