Date Picker Design: The Decisions That Matter
Controls for choosing a date or date range, from simple text fields to calendar widgets used for bookings and scheduling.
Priya Raghunathan
What is at stake
Date pickers are hard to build accessibly, and a calendar is often slower than typing for dates such as birthdays.
The playbook
- Use separate day, month and year fields for memorable dates
- Use calendars for bookings near the current date
- Show the expected date format
- Disable unavailable dates clearly
- Test keyboard and screen reader use
Where it goes wrong
Avoid:
- Calendar pickers for birth dates
- Ambiguous formats such as 03/04
- Custom widgets without keyboard support
- Clearing entered dates on errors
The numbers behind it
| Measure | Figure |
|---|---|
| Known dates | birthdays and other memorable dates are often quicker to type |
| Calendar pickers | suit dates near today and ranges such as travel |
| Native input | type="date" uses the browser's built-in picker |
| Accessibility | custom grids need full keyboard support |
Getting outside help
When to hand it over: Bring in help when building booking flows or scheduling tools.
Where this comes from
- GOV.UK Design System — Date input
- W3C ARIA Authoring Practices Guide — Date picker dialog example
- Nielsen Norman Group — Date-input form fields
The figures and practices above come from the sources listed.
Working on something like this?
We take on UI & UX Design work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
