6

I am designing a web form optimised for touchscreen mobile browsers, one of those fields is a date of birth entry. On the web form it is currently split into 3 select boxes (one for day, month and year). My initial thought is this might not work so well on mobile as the input might be fiddly for users but using this approach means the data will be validated as opposed to a free input field.

Does anyone have any experience of implementing a date of birth or date field for mobile and if so, approach did you use? Do andriod / iPhones have some built in keyboard / function to handle this?

1

4 Answers 4

6

Android has a DatePicker class for apps that will pop up the below dialog when the user taps into a field that is defined as a date type.

A quick google search seems to indicate that iOS has a similar class.

These are used fairly prolifically, in my experience, so you shouldn't have any issues with adoption of this type of input method for a mobile web form.

MobiScroll is a web-based version of the same idea which runs pretty well on both of my Android Devices and they indicate it works on iOS as well.

Date Picker

3
  • I was born many years ago .. do I really need to tap the [-] button under 2008 40+ times?
    – Erics
    Commented Dec 13, 2012 at 23:34
  • Actually, no! Selection technology has advanced significantly in the last year :) Both Android and Mobiscroll have since updated to use a scrolling style selection method, so you can scroll the wheel until you get the number you need.
    – Karen
    Commented Dec 14, 2012 at 16:16
  • In addition of scrolling, the picker actually accept keyboard input by tapping the field, but this might not work on some versions.
    – Andrew T.
    Commented Jan 4, 2016 at 6:13
2

I know just touching a <input type="date"/> on an iPhone will bring up a date selector native to the device. I'm not sure how that would work on other browsers but the testing would be pretty simple.

This input is not nearly as pretty in other environments, especially Chrome.

I'd be sure to use some feature detection to see if it's supported by the device and have a nice fallback if they don't.

1
  • A nice Javascript fallback usually catches users on user agents that don't have the HTML5 date form type, you can usually expect smartphone users to have JS
    – Zelda
    Commented Nov 3, 2011 at 15:02
0

People that use a particular device are used to entering dates in a specific way. So just use the method that they are most likely used to, whether that is on an iOS or an Android device.

0

If you would like to have a short learning curve for your app, I would recommend you just to follow each OS/platform design guide. Like @JohnGB said, each specific OS user is used to their own OS' patterns.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.