Date pickers from the Kombai gallery: a hotel app's stay dates, a finance dashboard's reporting range and a studio's visit booking.
What is a date picker?
A date picker is a control for choosing a day without typing it. Most show a month as a grid of days under a header with previous and next arrows. People tap a day to pick it, or a start and an end day to pick a range, and the chosen date shows in a field above.
- Days people can't choose, like past dates or closed days, are dimmed.
- Today is marked, so people can count forward from it.
Date pickers show up across calendar, charts and dashboard screens.
When to use a date picker
- Dates near todayBookings, deliveries and due dates, where the weekday matters.
- RangesHotel stays, leave requests and report windows with a start and an end.
- Limited availabilityWhen only some days can be booked, and people need to see which.
When not to use one
- Dates people knowA birthday is faster to type into day, month and year fields.
- Dates far awayPaging through months to reach 1990 or 2040 is slow.
- A fixed handful of daysIf only three days are open, show them as buttons.
Anatomy of a date picker
This one works. Pick a day, or click into the grid and use the arrow keys, Page Up and Page Down, then Enter.
March 2027
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
No deliveries on Sundays.
- Today
- Selected
- Unavailable
- Keyboard focus
- Date fieldShows the chosen date
- Month headerMonth name and arrows
- Weekday rowNames the columns
- Day gridEvery day in the month
- Selected dayFilled to stand out
- StatesToday, selected, unavailable, focus
Date picker variants
We sorted every date picker design in the Kombai gallery and found six patterns. Browse all 50 web and 30 mobile designs.
1. Month calendars
The default. One month as a grid of days, with arrows to move between months and the chosen day filled in.
2. Date ranges
Two taps set a start and an end, and the days between fill with a band. Wide screens often show two months side by side.
3. Day strips
A row of the next few days as cards or circles, for deliveries and appointments that are always soon.
4. Wheels
Scrolling columns for day, month and year, or for a day and a time, in a sheet at the bottom of a phone screen.
5. Calendars with prices
Each day carries a price or a color for low, typical and peak rates, so people can pick the cheapest dates.
6. Day, month and year fields
Three fields or dropdowns instead of a calendar, for dates people already know, like a date of birth.
Where date pickers show up
Stays and travel
Check-in and check-out dates on one calendar, often with the number of nights on the confirm button.
Deliveries and appointments
Pick a day, then a time slot, with prices or busy labels on each option.
Reports and logs
A range picker with presets like Last 7 days beside the calendar, filtering a dashboard or a log stream.
Scheduling posts and reminders
A date and a time together, to publish a post later or snooze a message until a set day.
Date picker vs similar components
Build notes
- For simple forms, start with <input type="date">. The browser draws the picker and the value is always yyyy-mm-dd.
- For a custom calendar, use role="grid" with one day in the tab order and aria-selected on the chosen day.
- Arrow keys move by day and week, Page Up and Page Down change the month, and Enter or Space picks the day.
- Dim the days people can't pick, and set min and max so typed dates are checked too.
- For a date of birth, use day, month and year fields with autocomplete set to bday-day, bday-month and bday-year.
- Let people type the date as well as pick it, and show the expected format next to the field.
FAQ
Should a date of birth use a date picker?
No. People know their birthday, so typing it is faster than paging back through decades. Use three fields for day, month and year, accept month names like "jan", and set autocomplete so browsers can fill it.
Native date input or a custom date picker?
Start with <input type="date">. It works across modern browsers and returns a standard yyyy-mm-dd value. Its picker looks different in each browser and operating system, so build a custom one when you need ranges, prices on days or a picker that matches the rest of the product.
How should a date range picker work?
The first tap sets the start, the second sets the end, and the days between fill in. Show both dates in fields above the calendar, show two months side by side when there is room, and offer presets like Last 7 days for reports.
What keyboard keys should a date picker support?
Left and Right move one day, Up and Down move one week, and Home and End jump to the start and end of the week. Page Up and Page Down change the month, Shift with Page Up or Page Down changes the year, and Enter or Space picks the day.
Related terms
All glossary terms · Browse 50 web and 30 mobile date picker designs