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

Answer 1

Birthdates are different from other dates because people are often used to typing their specific birthdate.
A text box with an example is clear, quick and easy to enter:

 _______
|_______| (example: 31/3/1970)

This should support flexible formatting such as 1/1/1970 or 20/07/70.

If you have to support different cultures with different date conventions (e.g. US and UK) then this could be error-prone for people who don't heed the example. To avoid this you could use a
select list for month, and text boxes for date and year.

 _________   __   ____
|March  |V| |__| |____|

This removes ambiguity between day and month ordering, but is a little clunkier to use.

Answer 2

I'm troubled by the preponderance of solutioning instead of designing. The OP said, "I want to know what is the most usable and problem free solution, so user wont be confused at all." So whether it's jQuery or JavaScript or C# or FORTRAN, the design is important--and it's the UX design, not the UI design that matters here. (Another plea to avoid the incorrect and illogical construct "UX/UI").

Use text input. Use three separate boxes labeled Day, Month, and Year (or Month, Day, and Year). Let users type the dates. Mixing text and lists in the same interaction is a Bad Thing (don't use text input for year but date picker or lists for month and day, for example).

Use a single text field that uses in-field format hints, for example, [ day / month / year ] Don't require formats too rigidly. If a user type JUN in the place where you expect a month, then use June on the back end. If a user types 6 in the place where you expect a month, then use June on the back end. If a user types 06 in the place where you expect a month, then use June on the back end.

Use Occam's Razor as a guide (in effect, most of the time the data will be accurate enough). Reduce cognitive friction (don't make users think).

Answer 3

JQueryUI datetime picker is best option as it allows pro users to enter their own value in textbox or they can choose it from picker.

Setting up picker to allow easy entering of birthdays or future dates is pretty easy too:

$(‘#datepicker’).datepicker({
    changeMonth: true,
    changeYear: true,
    yearRange: ‘-100:+50'
});

this shows something like this (cant post a photo as I'm new user: http://klalex.com/wp-content/uploads/2009/07/picture-1.png)

and yearRange shows dates from DateTime.Now.Year - 100 to DateTime.Now.Year + 50

found this on: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Answer 4

I would also recommend the combination of DatePicker and fields

See this demo, where the date picker does reflect the date entered in the fields by the user.
It is based however on a DatePicker using Prototype and Scriptaculous though. I mention it for illustration purpose.

Answer 5

Whether to use a datepicker or not I think depends on how long ago the dates are. If they are typically in the current month, and almost never more than a few months old, and you know that Javascript will be around, a datepicker is good. If the dates are not recent (say, a birthdate) I think this is the best option:

http://img411.imageshack.us/img411/6328/mockupg.png

Note that this is different from Patrick McElhaney's answer in that the year is a text box, not a dropdown. Selecting a number from a drop down box that is hundreds of elements long is very annoying for the user.

Answer 6

If your goal is to make sure "the user won't be confused at all," I think this is the best option.

I wouldn't recommend a datepicker for date of birth. First you have to browse to the year (click, click, click…), then to the month (click some more), and then find and click the tiny number on a grid.

Datepickers are useful when you don't know the exact date off the top of your head, e.g. you're planning a trip for the second week of February.