What's the best UI for entering date of birth? [closed]

Answer 1

You should take a look at Datejs.

Datejs is an open-source JavaScript Date Library.

Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn’t just parse strings, it slices them cleanly in two.

Answer 2

I created three dropdowns for Date of Birth selection and number of days changes dynamically based on the year and month selection. http://jsfiddle.net/ravitejagunda/FH4VB/10/

daysInMonth = new Date(year,month,1,-1).getDate();

Answer 3

I would prefer a datepicker (and a input box with documented format as a fall-back) for an international site.

Date formats vary and are sometimes hard to read if you are now used to them. Too bad many people aren't comfortable with ISO 8601. :-(

Answer 4

I would suggest using a drop down menu for each field, making sure to label each as day, month and year. A date picker might also help, but if the user doesn't have JavaScript enabled, it won't work.

Answer 5

As mentioned in this Jakob Nielsen article, drop down lists should be avoided for data that is well known to the user:

Menus of data well known to users, such as the month and year of their birth. Such information is often hardwired into users' fingers, and having to select such options from a menu breaks the standard paradigm for entering information and can even create more work for users.

The ideal solution is likely something like follows:

• Provide 3 separate text boxes for day, month, and year (labeled appropriately)
• Sort the text boxes according to the user's culture.
• Day and Month text boxes should be sized so that a 2 digit input is assumed.
• Year text box should be sized so that a 4 digit year is assumed.
• Allow the user to enter a 2 or 4 digit year. Assume a 2 digit year is 1900, and update the textbox to reflect this onBlur (or on a following confirmation step).
• Allow the user to enter either a month number OR month name.

---

EDIT: Here is how we implemented our DOB picker: Masked text input field with HTML5 regex to force the numeric keyboard on iOS devices.

http://www.huntercourse.com/usa/texas/

Answer 6

I had tried datePicker with my user but it turn out to be a bad UI to them. What I end up base on their request is to have 3 textbox where they can quickly type [ day ] [ month ] [ year ] :(