ComponentCraft conventionAdvanced
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 page
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.
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 PreventionHeuristic
- Postel's LawLaw
- ConstraintsPrinciple