Design Inspirations #2 - Date inputs 🗓

A monthly bunch of handpicked design inspirations to awake your creativity

Daria Khimych
Jul 31, 2018 · 4 min read

Designing a date picker may seem like it’s not a big deal. 🤷‍♀️ However, even such small details can lead to significant usability problems. Unintuitive date input leads to users’ frustration, stress and annoyance, which means they probably won’t use your app again.

Hard to believe? Imagine that you gnash your teeth seconds after opening the app, and you have hundreds of other apps to choose from. It can’t end up well. And there’s only one chance to make a first impression, isn’t it?

As designers, we must endeavor ourselves to improve such small, but fundamental things. In this article, we’ll go through handpicked design solutions related to date inputs, and share our opinions on what patterns are supposed to work in what situations.

When you’re done, take a look at resources we picked for you as our must-reads. Sip a ☕️ and enjoy!

Most common date picker patterns

  • text input
  • scrolling date picker
  • dropdown list
  • calendar.

Text input is the most basic option for date input and the most effective one in many cases. It can be used to provide dates that are far into the past/future. If you decide to employ it, don’t forget to suggest your users an appropriate date format and/or handle the field validation. Works incredibly in combination with the calendar pattern. 🌟

Date Range Picker by Greyson Sofia MacAlpine
Date Range Picker Concept by Scott Raney

Scrolling date picker is commonly used on the mobile devices. And it does its job well when the user has a limited number of dates to choose from. Otherwise, it will turn out to be slow and unproductive.

Appointment booking by Johny vino™
Creating Event by Alexandra Bondar
Travel iOS App — Search Flights by Yara Velichko

Dropdown list is still the most frequently used pattern on the web. It’s usually divided into next values: day, month, year. It can be used to provide birthdates, appointments and special events dates etc. But there are some problems that lie behind this pattern: sometimes it’s too hard to find the proper year because of a very long list, and the whole process of picking the date can be elongating. Personal trick: make your user to type in the year instead of to select it from the dropdown. 😎

Schedule a meeting — App by Hrvoje Grubisic
Create a New Project Modal by Paul Flavius Nechita

Calendar pickers usually display one or two months at one time and remind us of the well-known printed versions. They show the days of the week and allow us to perform a bunch of actions. This pattern will go well with events that are close to the present time (within a current year) - it will prevent extra navigation.

Calendar for Task Manager by Aga Ciurysek for 10Clouds
timeION by kohutpiotr for 10Clouds
My Calendar | Day View by Julia Jakubiak for Fireart Studio
Cottage Booking Process by Daria Khimych for 10Clouds
Siheidu calendar by Aga Ciurysek for 10Clouds
Calendar View by Ionut Zamfir

See you in the next chapter 👋

Follow 10Clouds to get even more inspirations from different areas of design.


Design, Development, User Interface and User Experience knowledge from 10Clouds Team. We are here to inspire!

Daria Khimych

Written by

Product Designer at 10Clouds



Design, Development, User Interface and User Experience knowledge from 10Clouds Team. We are here to inspire!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade