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:
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.
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.
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 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.
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.
请注意，这与 Patrick McElhaney 的答案不同，因为年份是一个文本框，而不是下拉列表。 从数百个元素长的下拉框中选择一个数字对于用户来说非常烦人。
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:
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.
至少在 Macintosh 下（我不知道 Windows），您还可以使用键盘访问选择框中的日期：借助 Tab 键，您可以将焦点放在表单元素上，然后按箭头键下拉列表，然后输入例如 1967，眨眼间就到了……
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 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.
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)
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 !
daysInMonth = new Date(year,month,1,-1).getDate();
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();
发布评论
评论（24）
如果您的目标是确保“用户完全不会感到困惑”，我认为这是最好的选择。
我不会推荐日期选择器 出生日期。 首先，您必须浏览到年份（单击、单击、单击...），然后浏览到月份（再单击一些），然后找到并单击网格上的小数字。
当您不知道确切的日期时（例如，您计划在二月的第二周旅行），日期选择器非常有用。
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.
虽然这是一个非常古老的问题，但对于输入正确的出生日期非常重要，尤其是在注册表中。
我认为没有人比 google 帐户注册做得更好：
从选择框中首先选择月份并手动输入日期和年份。 简单的。
易于验证。 用户可以轻松获得正确的结果。 无法在选择框中向后滚动 1900 年至今的年份。 无需根据月份输入更新“日期”选择框。 在网络上效果很好。 在移动设备上运行良好。 适用于所有区域设置，例如 01/10/2014 - 是 10 月 1 日还是 1 月 10 日？ 我预计我们将来会更多地看到这种生日选择器格式。
总的来说，日期选择器只是一个糟糕的解决方案。 这么多点击！ 在我看来，日期选择器仅在知道一周中的哪一天很重要（例如预订门票）时才有用。
更新2/6/2016：我来自英国，所以我更熟悉日/月/年格式，而不是月/日/年。 但是，对于使用光标选择月份的用户，我相信首先使用选择框比输入 > > 更容易。 选择框> 输入。 评论日期是6月2日，而不是2月6日；）
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.
正如 这篇 Jakob Nielsen 文章 中提到的，下拉列表应该避免使用用户熟知的数据：
理想的解决方案可能如下所示：
编辑：以下是我们实现 DOB 选择器的方法：使用 HTML5 正则表达式屏蔽文本输入字段，以在 iOS 设备上强制使用数字键盘。
http://www.huntercourse.com/usa/texas/
As mentioned in this Jakob Nielsen article, drop down lists should be avoided for data that is well known to the user:
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.
http://www.huntercourse.com/usa/texas/
出生日期与其他日期不同，因为人们通常习惯于输入特定的出生日期。
带有示例的文本框清晰、快速且易于输入：
这应该支持灵活的格式，例如 1/1/1970 或 20/07/70。
如果您必须支持具有不同日期约定的不同文化（例如美国和英国），那么对于不注意该示例的人来说，这可能很容易出错。 为了避免这种情况，你可以使用
选择月份列表以及日期和年份文本框。
这消除了日和月排序之间的歧义，但使用起来有点笨拙。
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:
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.
This removes ambiguity between day and month ordering, but is a little clunkier to use.
您应该查看 Datejs。
You should take a look at Datejs.
我对解决方案而不是设计的优势感到困扰。 OP 说：“我想知道什么是最有用且无问题的解决方案，这样用户就不会感到困惑。” 因此，无论是 jQuery、JavaScript、C# 还是 FORTRAN，设计都很重要——这里重要的是 UX 设计，而不是 UI 设计。 （再次呼吁避免不正确且不合逻辑的构造“UX/UI”）。
使用文本输入。 使用三个单独的框，分别标记为“日”、“月”和“年”（或“月”、“日”和“年”）。 让用户输入日期。 在同一个交互中混合文本和列表是一件坏事（例如，不要使用文本输入年份，而使用日期选择器或月份和日期列表）。
使用使用字段内格式提示的单个文本字段，例如，[日/月/年] 不要对格式要求太严格。 如果用户在您期望月份的位置键入 JUN，则在后端使用 June。 如果用户在您期望月份的位置输入 6，则在后端使用 June。 如果用户在您期望月份的位置键入 06，则在后端使用 June。
使用奥卡姆剃刀作为指导（实际上，大多数时候数据都足够准确）。 减少认知摩擦（不要让用户思考）。
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).
我还推荐 DatePicker 和字段的组合
请参阅 此演示，其中日期选择器确实反映了用户在字段中输入的日期。
然而，它是基于 使用 Prototype 和 Scriptaculous 的 DatePicker 。 我提到它是为了说明目的。
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.
我曾与我的用户一起尝试过 datePicker，但结果对他们来说这是一个糟糕的用户界面。
根据他们的要求，我最终得到的是 3 个文本框，他们可以在其中快速输入 [ 天 ] [ 月 ] [ 年 ] :(
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.
为什么不测试所有三个并选择性能最好的一个呢？
这似乎是 Google 网站优化工具 测试的一个不错的选择。
您拥有的用户类型或您运行的网站类型可能决定您的解决方案应该与“规范”不同。
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".
我通常使用两者——一个以正确格式填充文本字段的日期选择器。 高级用户可以直接编辑文本字段，喜欢鼠标的用户可以使用日期选择器进行选择。
如果您担心空间问题，我通常只有文本字段，旁边有一个小日历图标。 如果您单击日历图标，则会弹出日期选择器。
另外，我发现用指示正确格式的文本（即：“DD/MM/YYYY”）预先填充文本字段是一种很好的做法。 当用户聚焦文本字段时，文本就会消失，以便他们可以输入自己的内容。
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.
我认为是否使用日期选择器取决于日期有多早。 如果它们通常是当月的，并且几乎不会超过几个月，并且您知道 Javascript 将会出现，那么日期选择器是不错的选择。 如果日期不是最近的（例如出生日期），我认为这是最好的选择：
http://img411.imageshack.us/img411/6328/mockupg.png
请注意，这与 Patrick McElhaney 的答案不同，因为年份是一个文本框，而不是下拉列表。 从数百个元素长的下拉框中选择一个数字对于用户来说非常烦人。
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.
我认为日期选择器只会让输入出生日期的操作变得更加复杂。
正如已经提到的，对于用户来说，将几天和几个月的下拉列表与一年的文本框组合起来似乎是最有效的。 通过这种方式输入出生日期只需不到 10 秒，这比日期选择器快得多：借助 Tab 键（所有用户都应该学会使用它来完成表单），可以快速从一个表单转到另一个表单元素到下一个。
至少在 Macintosh 下（我不知道 Windows），您还可以使用键盘访问选择框中的日期：借助 Tab 键，您可以将焦点放在表单元素上，然后按箭头键下拉列表，然后输入例如 1967，眨眼间就到了……
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…
我更喜欢国际网站的日期选择器（以及带有文档格式的输入框作为后备）。
日期格式各不相同，如果您现在习惯了它们，有时会很难阅读。 可惜很多人对 ISO 8601 不太满意。:-(
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. :-(
我建议为每个字段使用下拉菜单，确保将每个字段标记为日、月和年。 日期选择器也可能有帮助，但如果用户没有启用 JavaScript，它将无法工作。
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.
我会选择一个日期选择器。 它是唯一允许专家用户手动输入日期并指导新手轻松输入日期的组件。
如果您通过按 Tab 键输入，而是单击按钮，则日历不应弹出。 因此，没有专家用户对此感到恼火。
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.
谁不使用 jQuery UI DatePicker？
它可以进行配置以满足几乎任何需求。 唯一的缺点是，如果您将其包含在 jQuery UI 中，它会占用较大的空间。
更新
某些文件大小似乎已发生变化，因此在下面进行了更新。 请记住，这些数字仅在上次更新时才是正确的。 从那时起，情况可能发生了变化。
但这还不错......
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.
But that's not too bad...
JQueryUI 日期时间选择器是最好的选择，因为它允许专业用户在文本框中输入自己的值，或者他们可以从选择器中选择它。
设置选择器以允许轻松输入生日或未来日期也非常简单：
$(‘#datepicker’).datepicker({ changeMonth: true, changeYear: true, yearRange: ‘-100:+50' });这显示了类似的内容（因为我是新用户，所以无法发布照片：http://klalex.com/wp-content/uploads/2009/07/picture-1.png)
和yearRange 显示从 DateTime.Now.Year - 100 到 DateTime.Now.Year + 50 的日期
在以下位置找到：http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/
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/
我刚刚在 JSFiddle 上发现了一个插件。
两种可能的选择：
1 个单输入或 3 个输入，但看起来像一个输入...（使用 Tab 键转到下一个输入）
[链接]http://jsfiddle.net/davidelrizzo/c8ASE/
看起来很有趣！
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 !
我想你可以尝试插件 birthdaypicker，
I think you can try plugin birthdaypicker,
您可以使用插件 cxcalendar。 它看起来像其他日期选择器。 但您可以在单击年月标题后在选择中选择年份和月份。
you can use plugin cxcalendar. It looks like other datepicker. but you can pick year and month in select after clicking year-month title.
我为出生日期选择创建了三个下拉菜单，并且天数根据年份和月份选择动态变化。 http://jsfiddle.net/ravitejagunda/FH4VB/10/
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/