Alex Rivera | Logout

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

Asked 2008-12-04T09:03:15.680
114

What is the best method for date of birth selector?

  • 3 text inputs (month / day / year) or one mask input. User MUST use keyboard
  • 3 select boxes. User can use keyboard or mouse.
  • One nice datepicker.

I want to know what is the most usable and problem free solution, so user wont be confused at all.

Edit
Report

4 Answers

29

For an advanced user text input is the best, if the user knows the date format, it is very fast. For a not so advanced user I suggest using a datepicker. Since usually you also have advanced and non-advanced users I suggest a combination of text input and datepicker.

answered 2008-12-04T09:17:12.393
3

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.

answered 2008-12-04T09:25:14.747
1

I normally use both -- a datepicker that populates a textfield in the correct format. Advanced users can edit the textfield directly, mouse-happy users can pick using the datepicker.

If you're worried about space, I usually have just the textfield with a little calendar icon next to it. If you click on the calendar icon it brings up the datepicker as a popup.

Also I find it good practice to pre-populate the textfield with text that indicates the correct format (i.e.: "DD/MM/YYYY"). When the user focuses the textfield that text disappears so they can enter their own.

answered 2008-12-04T09:29:23.850
0

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/

answered 2012-01-30T10:46:26.610

Your Answer