Geeking Out on Date Pickers

I am obsessed with forms, especially mobile forms. Not quite as much as Luke Wroblewski who wrote a book on the topic as early as 2008 and often talks about it. But way more than most product designers are.

Date pickers have been particularly neglected or mishandled for decades. And the worst offenders are birth date pickers.

The most common design patterns for birth date picker are…

  • Three dropdowns (aka the “UI of last resort”) one each for date, month, and year. It ensures accuracy of input but it’s just too many taps to enter a date.
  • A calendar picker is usually ok when you want to book a flight but it’s so bad for picking a date from decades ago (in my case) that they are single handedly responsible for this rant. My blood ran cold when I had to once select my date of birth using the Material Design Date Picker.
It is quite tedious to go back all those months and years to select a date from the 70s
  • The third and the least annoying is the humble text box. It works (mostly) but needs a lot of validations and custom code to minimize data entry and date formatting errors. It is commonly customized by breaking down the input into three separate ones, each auto jumping to the next as one gets filled. Kudos to for doing this really well.
Typeform Date Picker takes care of the separators leaving only the numbers to be entered by the user.

The text box approach becomes a bit tedious for the mobile. So here’s an idea that might disrupt the date picker industry.

How about adapting the iPhone Passcode pattern for the purpose of date entry. I do few things faster than typing my passcode in my iPhone. Here’s how it might look like:

If I remember correctly I might have been asked to enter my date of birth on a similar phone number entry screen while on a telco’s IVR. It’s quite effortless to tap those big circles six times and be done.

Came across another fantastic post on the topic by fellow date picker geek Adhithya.

Like what you read? Give Sudhir Nain a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.