Forms & Input
Date Picker
A date picker is a control that lets people choose a date by tapping it on a calendar instead of typing it by hand, which cuts down on format mistakes.
Definition
A date picker lets people choose a date by looking at a calendar and tapping it, instead of typing the date out by hand. Usually you tap a trigger, a month of days unfolds, and tapping a day cell selects that date and fills it into the field. The calendar shows the layout of weekdays, today's date, and the day you just picked all as distinct visual states. That way people can see which day falls on which weekday and where "now" sits, without doing any of that math in their head, and land on the exact date they want. It shows up constantly in flows where the date really matters, like booking or delivery, and it quietly cuts down on format mistakes along the way.
Why does it matter?
Dates are unusually easy to get wrong when a person types them by hand. It's hard to remember whether the format is year-month-day or month-day-year, and even harder to know what weekday a given date lands on. A date picker spreads the calendar out in front of the user and takes that load off. People can glance at the weekday to dodge a weekend, or use the "today" marker to judge how many days out a choice sits. And in flows where only certain dates are valid, like booking or delivery, blocking the unavailable ones so they can't be tapped at all means users never discover a bad date only after they've already chosen it. Range selection, where a start and end date go together, benefits the same way by showing the rules visually. In the end a date picker cuts input mistakes and keeps the flow from stalling.
Common mistakes
- Offering only calendar selection and blocking direct typing. For something like a birth date far in the past, paging back through years at a time is tedious. For someone who already knows the date, typing the numbers straight in is far faster.
- Not blocking dates that aren't selectable. If you let people pick past days, sold-out days, or an end date earlier than the start, they finish choosing and then hit an error at the submit step, forcing them to start over.
- Not distinguishing today from the selected day. When it isn't obvious at a glance which cell is today and which one you just picked, users hesitate, unsure whether they actually selected the right thing.
Practical tips
- Support both direct typing and calendar selection. Let people write a known date like 2026-07-14 straight in, and scan the calendar for a vague one, so both paths stay open in any situation.
- Grey out dates that can't be chosen so they're disabled and simply won't respond to a tap. Handling range rules up front, like preventing an end date earlier than the start, keeps invalid combinations from ever forming.
- Distinguish today, the selected day, and unavailable days clearly through color and shape. An outline on today, a filled background on the selected day, and a muted color on blocked days let users read the calendar far faster.