输入出生日期的最佳UI是什么？[关闭]

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

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

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

对于高级用户而言，文本输入是最好的，如果用户知道日期格式，则输入速度非常快。对于不太高级的用户，我建议使用日期选择器。因为通常您也有高级用户和非高级用户，所以我建议将文本输入和日期选择器结合使用。

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

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

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

尽管这是一个非常老的问题，但对于正确输入出生日期至关重要，尤其是在注册表中。

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

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

易于验证。容易使用户正确。不会在1900年至今的选择框中回滚年份。无需根据月份输入更新“天”选择框。在网络上效果很好。在移动设备上效果很好。适用于所有语言环境，例如2014年1月10日-是10月1日还是1月10日？我希望我们将来会看到更多这种生日选择器格式。

日期选择器只是一个糟糕的解决方案。如此多的点击！我认为，日期选择器仅在知道星期几很重要（例如预订机票）时才有用。

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

如雅各布·尼尔森（Jakob Nielsen）这篇文章中所述，对于用户众所周知的数据，应避免使用下拉列表：

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

理想的解决方案可能是什么样如下：

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

编辑：这是我们实现DOB选择器的方式：使用HTML5 regex的掩码文本输入字段可在iOS设备上强制数字键盘。

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

生日与其他日期不同，因为人们通常习惯于键入其特定的生日。
一个用一个例子文本框是明确的，快速和容易进入：

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

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

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

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

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

您应该看看Datejs。

Datejs是一个开放源代码的JavaScript日期库。

全面而又简单，隐秘且快速。Datejs已通过所有试验，随时可以进行罢工。Datejs不仅解析字符串，还将它们整洁地切成两半。

我对解决方案而不是设计的优势感到困扰。OP表示：“我想知道什么是最可用，最无问题的解决方案，因此用户完全不会感到困惑。” 因此，无论是jQuery还是JavaScript，C＃或FORTRAN，设计都很重要-在这里重要的是UX设计，而不是UI设计。（另一种避免使用不正确且不合逻辑的结构“ UX / UI”的请求）。

使用文字输入。使用三个分别标记为日，月和年（或月，日和年）的框。让用户键入日期。在同一交互中混合文本和列表是一件很糟糕的事情（例如，不要将文本输入用于年份，而将日期选择器或列表用于月份和日期）。

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

使用Occam的Razor作为指南（实际上，大多数情况下，数据将足够准确）。减少认知摩擦（不要让用户思考）。

我也建议结合使用DatePicker和字段

参见此演示，日期选择器确实反映了用户在字段中输入的日期。
但是，它基于使用原型和Scriptaculous的DatePicker。我出于说明目的提及它。

我曾与我的用户尝试过datePicker，但事实证明这对他们来说是一个糟糕的UI。根据他们的要求，我最终得到了3个文本框，他们可以在其中快速键入[day] [month] [year] :(

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

您为什么不测试所有三个，然后选择性能最佳的一个呢？这似乎是Google网站优化工具测试的不错选择。

可能是因为您拥有的用户类型，或者您正在运行的网站类型决定了您的解决方案应该不同于“规范”。

我通常同时使用两种-日期选择器，以正确的格式填充文本字段。高级用户可以直接编辑文本字段，鼠标满意的用户可以使用日期选择器进行选择。

如果您担心空间不足，我通常只会在文本字段旁边加一个小日历图标。如果单击日历图标，它将弹出日期选择器作为弹出窗口。

另外，我发现将文本字段预先填充以指示正确格式的文本（例如：“ DD / MM / YYYY”）是一种很好的做法。当用户聚焦文本字段时，文本消失，因此他们可以输入自己的文本。

作为这里的一个老年人，并且出生于月底，我发现出生日期的下拉菜单令人沮丧。我通常必须向下滚动两个下拉菜单，这很尴尬。我宁愿输入。

如果您可以设计一个控件，使其既可以接受下拉菜单也可以被键入，并清楚地说明这两项工作，那就太好了。

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

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

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

我认为日期选择器只会使输入人的生日变得更加复杂。

如前所述，对于用户而言，将几天和几个月的下拉列表与一年中的文本框组合在一起似乎是最有效的。这样输入出生日期只需不到10秒，比日期选择器要快得多：多亏了tab键（所有用户都应学会使用此键来填写表格），从一种表格中查找数据很快元素到下一个。

至少在Macintosh（对于Windows我不知道）下，您还可以使用键盘来访问选择框内的日期：由于使用了Tab键，您可以将焦点集中在表单元素上，然后按箭头键进行下拉列表，然后输入例如1967，您就在眨眼之间就到达了…

对于国际站点，我希望使用日期选择器（以及带有文档格式的输入框作为备用）。

日期格式各不相同，如果您现在习惯了，它们有时会很难读懂。不幸的是，很多人不满意ISO8601。:-(

我建议为每个字段使用一个下拉菜单，确保将每个标签分别标记为日，月和年。日期选择器也可能会有所帮助，但是如果用户未启用JavaScript，它将无法正常工作。

我会选择一个DatePicker。它是唯一允许专家用户手动输入并指导新手非常容易输入日期的组件。

如果您通过按Tab键进入，但单击一个按钮，日历应该不会弹出。因此，没有专家用户对此感到恼火。

谁不使用jQuery UI DatePicker？

它是可配置的，几乎可以满足任何需求。唯一的缺点是，如果将它包含在jQuery UI中，则其占用空间会很大。

更新资料

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

• CSS主题-23kb
• jQuery UI-缩小71kb
• DatePicker-38kb
• 加上几张图片（下个月/上个月，我确定是拼版的）

但这还不错...

JQueryUI日期时间选择器是最佳选择，因为它允许专业用户在文本框中输入自己的值，也可以从选择器中选择它。

设置选择器以允许轻松输入生日或将来的日期也很容易：

$（'＃datepicker'）。datepicker（{
    changeMonth：是的，
    changeYear：是的，
    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/

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

[link] http://jsfiddle.net/davidelrizzo/c8ASE/似乎很有趣！

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

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

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

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