Best practice for inputting a date on a mobile device

Question

Of a few options, I'm wondering what the most user friendly way to have a "date of birth" selector on a website viewed on a mobile device. Nearly all users would be from about '85 on, but could technically be any date.

1. Text box
2. Multiple text boxes (DD, MM, YYYY)
3. Multiple Select Boxes
4. Datepicker

Any other options I haven't considered?

Answer 1

This is very straightforward: you have to use the standard date picker control for each platform as outlined in the appropriate design guide.

Here's Android class reference, iOS class reference, and Windows Phone class reference.

If you're working on a web app, it's still better to use native date pickers to minimize user confusion and provide a consistent experience. This can be done by using HTML5 attributes of the input tag.

You might want to follow:

• A guide on how to create a proper date picker and use jQuery UI to fall back in older browsers or
• A guide on how to code all other input attributes in HTML5 to see native form controls.

Answer 2

During my work, I found that most people (including me) like single fields together with a format helper label (_____ DD/MM/YYYY) best.

It is easy and fast to type and everyone should get the formatting hint. Plus, it's easy to evaluate and work with afterwards in your program. Bonus: Most mobile devices have the common separators (/,.) present on the keyboard when in number entry mode.

Answer 3

Re: other options & considerations...

For dates like airline or hotel reservations (usually later in the current year) I personally prefer the simultaneous ability to enter text or choose from a pop-up calendar. For a web-app there are jQuery plugins that can accomplish this pretty nicely, or just use the native datePicker control, which people understand & can use fairly easily.

Another potential hiccup to consider regardless of device: localization of date formats.
What month names, calendar systems, or non-Latin alphabets might you need to consider based on your users?

Using "DD/MM/YYYY" works fine for most European countries, but can be confusing in the US where (for some unknown reason) people often write dates as MM/DD/YYYY.

For example, in Japan these are the same date, and are reversed from the European standard:

１９８５年１０月１２日 (YYYY/MM/DD)

昭和６０　１０月１２日 (GGYY/MM/DD, where "G" is the Imperial era for counting years)

Sure, most people would probably understand a clearly labeled input field, but it may be worth considering depending on your target audience.

For a native mobile app, the OS can usually assist with formatting the info to fit the user's chosen device settings. For a web-app, perhaps consider something like Moment.js or a PHP solution rather than hard-coding a single option into an input field. Handling different formats would likely require separate fields so they can be manipulated independently (although you could likely parse a single-line input into a standard format, it's more prone to typos & variations even within a given locale).