--- title: "Date picker UI: anatomy, variants and examples | Kombai" description: "A date picker lets people choose a date or a date range from a calendar, a strip of days or a set of wheels." canonical_url: https://kombai.com/glossary/date-picker/ author: "The Kombai Team" --- # Date picker A date picker lets people choose a date or a date range from a calendar, a strip of days or a set of wheels. - Also called: calendar picker, date range picker - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/date-picker/), [30 mobile designs](https://kombai.com/gallery/mobile/date-picker/) - [Bramblewick](https://kombai.com/gallery/inspirations/date-picker-ios-17/) (Mobile) - [Marver](https://kombai.com/gallery/inspirations/date-picker-web-1/) (Web) - [Hairspring](https://kombai.com/gallery/inspirations/date-picker-ios-25/) (Mobile) ## 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. ## When to use date picker - **Dates near today.** Bookings, deliveries and due dates, where the weekday matters. - **Ranges.** Hotel stays, leave requests and report windows with a start and an end. - **Limited availability.** When only some days can be booked, and people need to see which. ## When not to use one - **Dates people know.** A birthday is faster to type into day, month and year fields. - **Dates far away.** Paging through months to reach 1990 or 2040 is slow. - **A fixed handful of days.** If only three days are open, show them as buttons. ## Anatomy 1. **Date field**: Shows the chosen date 2. **Month header**: Month name and arrows 3. **Weekday row**: Names the columns 4. **Day grid**: Every day in the month 5. **Selected day**: Filled to stand out 6. **States**: Today, selected, unavailable, focus ## Variants We sorted every date picker design in the Kombai gallery and found six patterns. ### 1. Month calendars The default. One month as a grid of days, with arrows to move between months and the chosen day filled in. - [Hoarfrost](https://kombai.com/gallery/inspirations/date-picker-ios-8/) (Mobile) - [Flintrow](https://kombai.com/gallery/inspirations/date-picker-ios-5/) (Mobile) - [Firnline](https://kombai.com/gallery/inspirations/date-picker-web-7/) (Web) ### 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. - [Aventurine](https://kombai.com/gallery/inspirations/date-picker-ios-3/) (Mobile) - [Russetmark](https://kombai.com/gallery/inspirations/date-picker-web-39/) (Web) - [Chainage](https://kombai.com/gallery/inspirations/date-picker-web-31/) (Web) ### 3. Day strips A row of the next few days as cards or circles, for deliveries and appointments that are always soon. - [Cairnmark](https://kombai.com/gallery/inspirations/date-picker-ios-13/) (Mobile) - [Foreland](https://kombai.com/gallery/inspirations/date-picker-ios-28/) (Mobile) - [Boltrope](https://kombai.com/gallery/inspirations/date-picker-web-47/) (Web) ### 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. - [Yarrowfield](https://kombai.com/gallery/inspirations/date-picker-ios-19/) (Mobile) - [Springbarrel](https://kombai.com/gallery/inspirations/date-picker-ios-21/) (Mobile) - [Tickover](https://kombai.com/gallery/inspirations/date-picker-ios-24/) (Mobile) ### 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. - [Neaptide](https://kombai.com/gallery/inspirations/date-picker-ios-26/) (Mobile) - [Windlass](https://kombai.com/gallery/inspirations/date-picker-ios-27/) (Mobile) - [Millrace Host](https://kombai.com/gallery/inspirations/date-picker-web-3/) (Web) ### 6. Day, month and year fields Three fields or dropdowns instead of a calendar, for dates people already know, like a date of birth. - [Bellowsmoor](https://kombai.com/gallery/inspirations/date-picker-web-38/) (Web) - [Combfield](https://kombai.com/gallery/inspirations/date-picker-web-45/) (Web) - [Add work history](https://kombai.com/gallery/inspirations/date-picker-web-19/) (Web) ## 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. - [Contourline](https://kombai.com/gallery/inspirations/date-picker-ios-14/) (Mobile) - [Escapewell](https://kombai.com/gallery/inspirations/date-picker-ios-22/) (Mobile) - [Alderfern](https://kombai.com/gallery/inspirations/date-picker-ios-20/) (Mobile) ### Deliveries and appointments Pick a day, then a time slot, with prices or busy labels on each option. - [Springtide](https://kombai.com/gallery/inspirations/date-picker-ios-29/) (Mobile) - [Windrow](https://kombai.com/gallery/inspirations/date-picker-ios-10/) (Mobile) - [Ridgecomb](https://kombai.com/gallery/inspirations/date-picker-web-50/) (Web) ### Reports and logs A range picker with presets like Last 7 days beside the calendar, filtering a dashboard or a log stream. - [Kettlestitch](https://kombai.com/gallery/inspirations/date-picker-web-12/) (Web) - [Rivenoak](https://kombai.com/gallery/inspirations/date-picker-web-22/) (Web) - [Email import](https://kombai.com/gallery/inspirations/date-picker-web-36/) (Web) ### Scheduling posts and reminders A date and a time together, to publish a post later or snooze a message until a set day. - [Understory Growers](https://kombai.com/gallery/inspirations/date-picker-web-26/) (Web) - [Handstroke](https://kombai.com/gallery/inspirations/date-picker-web-24/) (Web) - [Luffline](https://kombai.com/gallery/inspirations/date-picker-web-48/) (Web) ## Date picker vs similar components | | [Date picker](https://kombai.com/glossary/date-picker/) | [Time picker](https://kombai.com/glossary/time-picker/) | [Calendar](https://kombai.com/glossary/calendar/) | [Text field](https://kombai.com/glossary/text-field/) | |---|---|---|---|---| | Picks | A day or a range of days | A time of day | Nothing, it shows events | Any typed value | | Shows | A month of days | Hours and minutes or slots | Days, weeks or months of events | One line of text | | Best for | Bookings and due dates | Appointments and alarms | Planning and schedules | Dates people know by heart | ## Build notes - For simple forms, start with . 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 . 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 - [Time picker](https://kombai.com/glossary/time-picker/) - [Calendar](https://kombai.com/glossary/calendar/) - [Text field](https://kombai.com/glossary/text-field/) - [Form](https://kombai.com/glossary/form/) ## References - [WAI-ARIA Authoring Practices: Date picker dialog example](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/) - [MDN: The date input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/date) - [GOV.UK Design System: Date input](https://design-system.service.gov.uk/components/date-input/)