forms - 输入出生日期的最佳 UI 是什么？

Question

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

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

我想知道什么是最有用和无问题的解决方案，所以用户根本不会感到困惑。

score 162 · Accepted Answer

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

月、日、年的三个下拉菜单

我不推荐使用 datepicker 作为date 的 date。首先，您必须浏览到年份（单击、单击、单击……），然后浏览到月份（单击更多），然后找到并单击网格上的小数字。

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

score 146 · Accepted Answer

虽然这是一个非常古老的问题，但正确输入出生日期非常重要，尤其是在注册表中。

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

谷歌帐户注册

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

易于验证。方便用户做对。从 1900 年到现在，选择框中没有回滚年份。无需根据月份输入更新“日”选择框。在网络上工作得很好。在移动设备上工作得很好。适用于所有地区，例如 2014 年 1 月 10 日 - 是 10 月 1 日还是 1 月 10 日？我希望我们将来会更多地看到这种生日选择器格式。

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

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

score 28 · Accepted Answer

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

score 26 · Accepted Answer

正如这篇 Jakob Nielsen 文章中所提到的，对于用户熟知的数据，应避免使用下拉列表：

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

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

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

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

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

score 11 · Accepted Answer

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

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

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

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

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

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

score 5 · Accepted Answer

你应该看看Datejs。

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

全面，但简单，隐蔽和快速。Datejs 已经通过了所有的考验，准备好出击了。Datejs 不只是解析字符串，它会将它们干净地分成两部分。

score 4 · Accepted Answer

我对解决方案而不是设计的优势感到困扰。OP 说：“我想知道什么是最有用且无问题的解决方案，这样用户就不会感到困惑了。” 因此，无论是 jQuery、JavaScript、C# 还是 FORTRAN，设计都很重要——这里重要的是 UX 设计，而不是 UI 设计。（另一个避免不正确和不合逻辑的构造“UX/UI”的请求）。

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

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

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

score 3 · Accepted Answer

我还推荐 DatePicker 和字段的组合

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

score 3 · Accepted Answer

我曾与我的用户一起尝试过 datePicker，但结果对他们来说是一个糟糕的 UI。我最终基于他们的要求是有 3 个文本框，他们可以在其中快速输入 [day] [month] [year] :(

score 2 · Accepted Answer

把两者都放在一起，然后互相更新。如果用户从日期选择器中选择日期，则很容易修复文本字段中的小错误点击或可视化您在日期选择器的文本字段中键入的选择。

score 2 · Accepted Answer

你为什么不测试所有三个并选择表现最好的一个？这似乎是Google 网站优化器测试的好候选。

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

score 1 · Accepted Answer

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

如果您担心空间，我通常只有文本字段旁边有一个小日历图标。如果您单击日历图标，它会弹出日期选择器。

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

我认为日期选择器只会使输入出生日期的动作更加复杂。

如前所述，对于用户来说，将日期和月份的下拉列表与年份的文本框相结合似乎是最有效的。以这种方式输入出生日期只需不到 10 秒，这比日期选择器要快得多：多亏了 Tab 键（所有用户都应该学会使用它来填写表格），从一个表格开始变得很快元素到下一个。

至少在 Macintosh 下（我不了解 Windows），您还可以使用键盘访问选择框内的日期：感谢 tab 键，您可以将焦点放在表单元素上，然后按箭头键下拉列表，然后输入例如 1967，你会在眨眼间到达那里......</p>

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

谁不使用 jQuery UI DatePicker？

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

更新

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

CSS 主题 - 23kb
jQuery UI - 71kb 缩小
日期选择器 - 38kb
加上几张图片（下个月/上个月，我很确定是精灵）

但这还不算太糟糕...

score 0 · Accepted Answer

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

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

$('#datepicker').datepicker({
    更改月份：真，
    更改年份：是的，
    年份范围：'-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/

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

我想你可以试试插件生日选择器，

在此处输入图像描述

于 2014-03-26T14:19:35.660 回答

score 0 · Accepted Answer

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

在此处输入图像描述

score -3 · Accepted Answer

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

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

forms - 输入出生日期的最佳 UI 是什么？

24 回答 24

更新

Related

Reference