What is the best method for date of birth selector?
I want to know what is the most usable and problem free solution, so user wont be confused at all.
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.
Whilst this is a very old question, it is so important in getting a date of birth input correct, especially in a registration form.
I think no one has done this better than the google accounts sign up:
Select the month first from a select box and manually type in the date and year. Simple.
Easy to validate. Easy for users to get right. No scrolling back the years in a select box from 1900-the present year. No need to update a 'day' select box based on month input. Works great on web. Works great on mobile. Works for all locales eg 01/10/2014 - is that the 1st October or 10th Jan? I expect we'll be seeing this birthday picker format a lot more in future.
A datepicker is just a poor solution all round. So many clicks! In my opinion, a datepicker is only useful when knowing the day of the week is important eg booking tickets.
Update 2/6/2016: I am from UK, so I am more familiar with day/month/year formats, rather than month/day/year. However, users who will use their cursor to select the month, I believe it is much easier having the select box first, rather than going input > select box > input. The comment date is 2nd June, not 6th Feb ;)
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.
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:
EDIT: Here is how we implemented our DOB picker: Masked text input field with HTML5 regex to force the numeric keyboard on iOS devices.
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.
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.
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).
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.
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 ] :(
Put both and make each update the other. If the user chooses the date from the datepicker, it is easy to fix a minor misclick in the text field or visualize the choise you typed into text field in the datepicker.
Why don't you test all three and pick the one that the performs the best? This seems like a good candidate for Google Website Optimizer to test.
It may be that the type of users you have, or the type of site you are running may dictate that your solution should be different than the "norm".
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.
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.
As perhaps one of the older people here, and born late in the month, I find drop-down menus for birthdates to be frustrating. I typically have to scroll down on two drop-down menus, and that's awkward. I'd much rather type it in.
If you can have a control designed so that it can either accept drop-down menus or be typed into, and make it clear both work, that would be excellent.
I think a date picker just make the move more complicated to enter one's birth date.
As already mentioned, a combination of drop lists for days and months with a text box for the year seems the most efficient for a user. It takes just less than 10 seconds to enter a birth date this way, which is far quicker than a date picker: thanks to the tab key (which all users should learn to use to complete a form), it's fast to go from one form element to the next one.
At least under Macintosh (I don't know about Windows), you also can use the keyboard to access date inside select boxes: thanks to the tab key, you get the focus onto the form element, then press the arrow key to drop down the list, then type for instance 1967 and you get there in the blink of an eye…
I have just discovered a plugin on JSFiddle. Two possible alternatives : 1 single input OR 3 inputs, but looks like a single one... (use Tab key to go to the next input)
[link]http://jsfiddle.net/davidelrizzo/c8ASE/ It seems interesting !
you can use plugin cxcalendar. It looks like other datepicker. but you can pick year and month in select after clicking year-month title.
I would take a DatePicker. It's the only component that allows expert users to enter it manually and guides novices to enter a date very easy.
The calendar should not pop up if you enter via pressing tab, but clicking on a button. So no expert user is annoyed of it.
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. :-(
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.
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/
Who don't you use the jQuery UI DatePicker?
It's configurable to suit pretty much any needs. The only downside is if you're including it with jQuery UI it has a somewhat large footprint..
Some of the file sizes appear to have changed, so they are updated below. Keep in mind these numbers will only be correct for the time they were last updated. Things may have changed since then.
But that's not too bad...
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();
