What is a date picker in UX design?
A date picker is a form control that allows users to select a date. Implementations range from native browser date inputs that use the operating system's built-in date selection interface, to custom calendar widgets that display a month view with selectable days, to date range pickers that allow selection of a start and end date simultaneously. Date pickers also include time selection in datetime pickers, and relative date options such as "today," "tomorrow," or "in one week" in contexts where approximate or relative dates are more useful than specific calendar dates.
When should you use a calendar widget versus a text input?
Calendar widgets are most appropriate when users are selecting a date in the near future and benefit from seeing the context of surrounding dates, such as when booking an appointment and wanting to see which days are available. They are less appropriate when users know the specific date they want to enter, such as entering a birth date, where a simple text field with clear formatting instructions is faster and less friction-intensive than navigating a calendar widget to a date that may be decades in the past. The Nielsen Norman Group research on date pickers consistently shows that well-labeled text inputs outperform calendar widgets for known specific dates.
What are the accessibility requirements for date pickers?
Custom calendar date pickers must be fully keyboard navigable: users must be able to open the calendar, navigate between days using arrow keys, navigate between months using Page Up and Page Down, and select a date using Enter. The calendar must be announced to screen readers with appropriate ARIA roles and labels. Available and unavailable dates must be communicated both visually and programmatically. Native browser date inputs provide accessibility for free but offer less visual control. When implementing custom date pickers, the ARIA Authoring Practices Guide's dialog and grid patterns provide the specification for accessible implementation.