输入出生日期的最佳用户界面是什么？

Question

出生日期选择器的最佳方法是什么？

• 3个文本输入（月/日/年）或一个蒙版输入。用户必须使用键盘
• 3个选择框。用户可以使用键盘或鼠标。
• 一个不错的datepicker。

我想知道什么是最实用和最无问题的解决方案，因此用户不会感到困惑。

Answer 1

如果您的目标是确保“用户不会感到困惑”，我认为这是最佳选择。

我不推荐出生日期的日期选择器。首先，您必须浏览到年份（单击，单击，单击...），然后到月份（单击更多），然后找到并单击网格上的小数字。

当您不知道头顶的确切日期时，日期选择器非常有用，例如：你计划在2月的第二周旅行。

Answer 2

虽然这是一个非常古老的问题，但在确定出生日期输入方面是非常重要的，尤其是在登记表格中。

我认为没有人比Google帐户注册更好：

从选择框中首先选择月份，然后手动输入日期和年份。简单。

易于验证。方便用户正确使用。从1900年到今年，不会在选择框中滚动年份。无需根据月份输入更新“日期”选择框。在网络上运行良好。适用于移动设备。适用于所有地区，例如01/10/2014 - 是10月1日还是1月10日？我希望将来我们会看到这种生日选择器格式。

日期选择器只是一个糟糕的解决方案。这么多点击！在我看来，只有在知道星期几很重要的情况下才能使用日期选择器，例如预订门票。

2016年2月6日更新：我来自英国，所以我更熟悉日/月/年格式，而不是月/日/年。但是，使用光标选择月份的用户，我相信首先选择框更容易，而不是输入＆gt;选择框＆gt;输入。评论日期是6月2日，而不是2月6日;）

Answer 3

对于高级用户，文本输入是最好的，如果用户知道日期格式，则速度非常快。对于不太高级的用户，我建议使用datepicker。由于通常您还拥有高级和非高级用户，因此我建议使用文本输入和日期选择器组合。

Answer 4

正如this Jakob Nielsen article中所述，对于用户熟知的数据，应避免使用下拉列表：

  

用户熟知的数据菜单，例如他们出生的月份和年份。这些信息通常硬连线到用户的手指中，不得不从菜单中选择这些选项打破了输入信息的标准范例，甚至可以为用户创造更多的工作。

理想的解决方案可能是 ，如下所示：

• 为日，月和年提供3个单独的文本框（标记为相应的）
• 根据用户的文化对文本框进行排序。
• 日期和月份文本框的大小应设为2位数输入。
• 年份文本框的大小应设为4位数。
• 允许用户输入2或4位数年份。假设2位数年份是1900年，并更新文本框以反映这个onBlur（或在以下确认步骤中）。
• 允许用户输入月份编号或月份名称。

---

编辑：以下是我们实现DOB选择器的方法：使用HTML5正则表达式屏蔽文本输入字段以强制iOS设备上的数字键盘。

http://www.huntercourse.com/usa/texas/

Answer 5

出生日期与其他日期不同，因为人们经常习惯于输入特定的出生日期 带有示例的文本框清晰，快速且易于输入：

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

这应该支持灵活的格式，例如1/1/1970或20/07/70。

如果您必须支持具有不同日期约定的不同文化（例如美国和英国），那么对于不注意该示例的人来说，这可能容易出错。为了避免这种情况，你可以使用一个 选择月份列表，以及日期和年份的文本框。

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

这消除了日和月订购之间的歧义，但使用起来有点笨拙。

Answer 6

你应该看看Datejs。

  

Datejs是一个开源JavaScript日期库。

     

全面，简单，隐秘，快速。 Datejs已全部通过   试验并准备好罢工。 Datejs不只是解析字符串，它   把它们干净地切成两半。

Answer 7

我对解决方案而不是设计的优势感到困扰。 OP说，＆＃34;我想知道什么是最有用和最无问题的解决方案，所以用户根本不会感到困惑。＆＃34;因此无论是jQuery还是JavaScript，还是C＃或FORTRAN，设计都很重要 - 它是用户体验设计，而不是这里重要的UI设计。 （另一种请求是避免错误和不合逻辑的构造＆＃34; UX / UI＆＃34;）。

使用文字输入。使用标有日，月和年（或月，日和年）的三个单独的框。让用户输入日期。在相同的交互中混合文本和列表是一件坏事（例如，不要使用年份的文本输入，而是使用日期选择器或月份和日期的列表）。

使用使用字段内格式提示的单个文本字段，例如，[日/月/年]不要太严格地要求格式。如果用户在您预期的月份中键入JUN，则在后端使用June。如果用户在您预期的月份中键入6，则在后端使用June。如果用户在您预期的月份中键入06，则在后端使用June。

使用奥卡姆剃刀作为指南（实际上，大多数时候数据都足够准确）。减少认知摩擦（不要让用户思考）。

Answer 8

我还建议使用DatePicker和字段

的组合

请参阅this demo，其中日期选择器确实反映了用户在字段中输入的日期 然而，它基于DatePicker using Prototype and Scriptaculous。我提到它是为了说明目的。

Answer 9

我曾经和我的用户一起尝试过datePicker，但事实证明这对他们来说是一个糟糕的用户界面。 根据他们的要求我最终得到的是3个文本框，他们可以快速输入[day] [month] [year] :(

Answer 10

放两个并使每个更新另一个。如果用户从日期选择器中选择日期，则很容易在文本字段中修复次要错误点击，或者可视化您在日期选择器中输入文本字段的选择。

Answer 11

为什么不对所有三个进行测试并选择性能最佳的一个？ 这似乎是Google Website Optimizer测试的好候选人。

您可能拥有的用户类型或正在运行的网站类型可能表明您的解决方案应该与“规范”不同。

Answer 12

是否使用datepicker我认为取决于日期是多久以前。如果它们通常在当前月份，并且几乎不会超过几个月，并且您知道Javascript将会出现，那么日期选择器就是好的。如果日期不是最近的（例如，生日），我认为这是最好的选择：

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

请注意，这与Patrick McElhaney的回答不同，年份是文本框，而不是下拉列表。从数百个元素长的下拉框中选择一个数字对用户来说非常烦人。

Answer 13

我认为日期选择器只是让进入一个人的出生日期更加复杂。

如前所述，日期和月份的下拉列表与年份的文本框组合似乎对用户来说效率最高。以这种方式输入出生日期只需不到10秒，这比日期选择器快得多：由于tab键（所有用户都应该学会用来完成表单），从一个表单中快速进入元素到下一个。

至少在Macintosh下（我不了解Windows），您也可以使用键盘访问选择框内的日期：由于使用Tab键，您可以将焦点放在表单元素上，然后按箭头键下拉列表，然后键入例如1967年，你眨眼间就到了那里......

Answer 14

也许这里的老人之一，本月末出生，我发现生日的下拉菜单令人沮丧。我通常需要向下滚动两个下拉菜单，这很尴尬。我宁愿输入它。

如果您可以设计一个控件，以便它可以接受下拉菜单或输入，并明确这两项工作，那就太棒了。

Answer 15

我通常使用两者 - 一个以正确格式填充文本字段的日期选择器。高级用户可以直接编辑文本字段，鼠标快乐的用户可以使用日期选择器进行选择。

如果你担心空间，我通常只有文本字段旁边有一个小日历图标。如果单击日历图标，则会将日期选择器显示为弹出窗口。

此外，我发现在文本字段中预先填充表明格式正确的文本（即：“DD / MM / YYYY”）是一种好习惯。当用户关注文本消失的文本字段时，他们可以输入自己的文本字段。

Answer 16

你不使用jQuery UI DatePicker？

它可以配置以满足任何需求。唯一的缺点是，如果你将它包含在jQuery UI中，那么它的占用空间就会很大..

更新

某些文件大小似乎已更改，因此会在下面进行更新。请记住，这些数字仅在上次更新时才正确。从那以后事情可能发生了变化。

• CSS主题 - 23kb
• jQuery UI - 71kb缩小
• DatePicker - 38kb
• 另外还有几张图片（下个月/上个月，我很确定这些图片很简陋）

但那还不错......

Answer 17

我建议为每个字段使用下拉菜单，确保将每个字段标记为日，月和年。日期选择器也可能有所帮助，但如果用户未启用JavaScript，则无法使用。

Answer 18

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/

上找到了这个

Answer 19

我刚刚在JSFiddle上发现了一个插件。 两种可能的选择： 1个单输入或3个输入，但看起来像一个...（使用Tab键转到下一个输入）

[链接] http://jsfiddle.net/davidelrizzo/c8ASE/ 这看起来很有意思！

Answer 20

我认为您可以尝试插件birthdaypicker，

Answer 21

您可以使用插件cxcalendar。它看起来像其他日期选择器。但您可以在点击年月标题后选择年份和月份。

Answer 22

我更喜欢国际网站的日期选择器（以及带有文档格式的输入框作为后备）。

日期格式各不相同，如果您现在已经习惯了，有时很难阅读。太糟糕了很多人对ISO 8601感到不舒服： - （

Answer 23

我会选择一个DatePicker。它是唯一允许专家用户手动输入并引导新手轻松输入日期的组件。

如果您通过按Tab键输入，但单击按钮，则不会弹出日历。所以没有专家用户对此感到恼火。

Answer 24

我为出生日期选择创建了三个下拉菜单，并根据年份和月份选择动态更改天数。 http://jsfiddle.net/ravitejagunda/FH4VB/10/

daysInMonth = new Date(year,month,1,-1).getDate();