Date Picker
A calendar control for selecting dates — and the component most often used where a plain text input would serve better.
UI ComponentsCalendars help when the day of the week or proximity to other dates matters: booking, scheduling, availability. They hurt when the user already knows the date and simply needs to enter it. Nobody wants to navigate back 420 months to reach their date of birth. For known dates, a text input with a clear format hint beats any calendar, and the best of both is a typeable field with an optional calendar beside it.
Ranges and timezones are where date pickers actually break. A range picker must make clear which end is being set, allow either end to be changed without restarting, and handle a second click before the first. Timezone handling has to be explicit — a “due today” date that flips a day depending on the viewer's offset is a support ticket, and a booking that does the same is a refund.
In practice
A clinic booking flow used a month-grid calendar for date of birth. 14% of patients entered a wrong year, mostly the current decade, and staff corrected them by phone. Replacing it with three short fields and a format hint dropped the correction rate to under 2%.
Where teams get it wrong
- A calendar for date of birth or any other long-past known date.
- Disabling text entry so people must navigate the grid.
- Range pickers with no indication of which end is being edited.
- Ambiguous formats — 03/04 without stating whether it is March or April.
- Dates rendered in the viewer's timezone when the value is a calendar day, shifting deadlines by one.
Learn more
You may ask
Frequently Asked Questions
When should you use a date picker instead of a text input?
When the day of the week or nearby availability affects the choice — bookings, scheduling, delivery slots. For a date the person already knows, such as a birth date, a typed input with a format hint is faster and more accurate.
How should date pickers handle ranges?
Show both ends at once, make clear which one a click will set, and let either be changed without clearing the other. Also handle the case where the second click lands before the first date.
Related terms
All terms- Input FieldThe control a person types into — the most-used element in most products and the one where small decisions cost the most.
- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
- Filter (UI)Controls that narrow a set of records — and the much harder job of keeping what was narrowed visible.
- Error StateWhat an interface shows when something failed — which system failed, whether the user's work survived, and what they can do next.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us