What s the best UI for entering date of birth

Question

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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I think you can try plugin birthdaypicker

User · Answer

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

User · Answer

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

User · Answer

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 hellip    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   -

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 hellip    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    Update  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    CSS theme - 23kb jQuery UI - 71kb minified DatePicker - 38kb Plus a couple of images  next month previous month  which I m pretty sure are sprited    But that s not too bad

User · Answer

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

User · Answer

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   -

User · Answer

you can use plugin cxcalendar  It looks like other datepicker  but you can pick year and month in select after clicking year-month title

User · Answer

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

User · Answer

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   -

User · Answer

I think you can try plugin birthdaypicker

User · Answer

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.

User · Answer

you can use plugin cxcalendar  It looks like other datepicker  but you can pick year and month in select after clicking year-month title

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 hellip    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

User · Answer

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    Update  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    CSS theme - 23kb jQuery UI - 71kb minified DatePicker - 38kb Plus a couple of images  next month previous month  which I m pretty sure are sprited    But that s not too bad

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   -

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 hellip    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

User · Answer

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

User · Answer

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

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

Examples related to forms

Examples related to user-interface

Examples related to usability