从用户那里获取日期/时间输入的最佳方法是什么？答案

【问题标题】：What's the best approach to get Date/Time input from the user?从用户那里获取日期/时间输入的最佳方法是什么？
【发布时间】：2009-02-23 21:06:39
【问题描述】：

这是一个多年来一次又一次地重新发明的轮子。

问题：用户需要输入日期/时间

基本考虑

我们希望让用户尽可能轻松地输入所需的日期/时间
有些应用程序需要历史日期，有些应用程序只需要未来日期，有些需要同时处理两者
我们希望防止用户输入乱码数据
我们希望尽可能主动地自动填充此控件。
我们希望此控件尽可能可重复使用。

流行的解决方案包括：

文本框
组合框
弹出式日历
服务器端和/或客户端验证
提醒用户注意不良数据的各种方式

关于即食解决方案有很多，但我正在寻找一些更一般的信息。是否对各种日期时间控制方法进行了任何可用性研究？那里有“最佳”日期时间控制吗？是否有任何行之有效的“注意事项”？

【问题讨论】：

+1 用“panopoly”这个词来描述这个！
@Chris：是的，这比“plethora”还要好！

标签： user-interface language-agnostic user-input

【解决方案1】：

我更喜欢文本输入，旁边有一个省略号按钮：

Enter a date [        ] [...]

省略号会弹出一个日历来填充文本输入，但用户可以根据需要输入日期。应在按下表单的“确定”按钮时进行验证 - 根据我的经验，尝试逐个字符地进行日期验证注定要失败。

验证应该是复杂的，并允许像这样的表达式

"today"
"Tomorrow"
"23 Jan"

等等

编辑：回复一些 cmets，可以在文本编辑失去焦点时进行验证（尽管我讨厌那种事情），在这种情况下，编辑内容可能会从“23 Jan”更改到 "23-01-2009" 表示该表达式已被理解。

【讨论】：

如果没有弹出窗口，日期验证可能会起作用，但是颜色/粗体文本/类似这样的变化。不过，这是一个很好的提示，+1。
是的，关于允许像提供的示例这样的表达式。如果我只输入“5”，我的意思是本月的 5 日，今年，如果你需要时间的话，这个时间，否则没有时间或午夜。另一个用户喜欢的快捷方式是 2009 年 2 月 23 日的 022309。他们中的一些人可以在数字键盘上快速完成。
@Bratch：你必须小心像 022309 这样的表达式。如果是 021009，那么是 2 月 10 日还是 10 月 2 日？甚至是 2002 年 10 月 9 日？
mmyers 的 +1。这是一个国际化问题。世界上很大一部分人使用 DDMM，但美国最常使用 MMDD。
我喜欢这种日期输入样式，但我会在按钮上使用一个小日历图标。有多少用户真正知道省略号在这种情况下的含义？此外，如果假设某种日期格式，那么可能应该在某处显示格式（MMDDYY）的示例。

【解决方案2】：

给我一个日历，让我用鼠标选择日期。让我用键盘输入日期。接受尽可能多的格式。如果我需要输入 2012 年 12 月 21 日，让我使用：

2012 年 12 月 21 日
2012 年 12 月 21 日
2012 年 12 月 21 日
12/21/2012（或 21/12/2012，选择一个，可能取决于我在哪个国家/地区使用该软件）
12212012（与上述相同的括号片段）
等

无论您决定采取什么措施来解决本地化问题，请确保您的期望是显而易见的。给我一个例子，或者一个带有MMDDYYYY的模板，我可以输入。

请不要给我必须滚动的下拉框，尤其是多年来。如果我老了，并且我正在进入我的出生日期，我的生命中没有足够的时间向下滚动到下拉框的底部。当我不知道选项是什么时，下拉框是一个很好的模式，但如果它是我非常熟悉的东西，比如我的出生日期，那么下拉菜单就很麻烦了。

现在，WRT 时间输入（大烦恼），不要以为我的意思是凌晨 3 点。如果我输入 3 的时间，假设我的意思是下午 3 点。让我做额外的工作来安排凌晨 3 点的事情。如果你不愿意代表我做这么多，至少提醒我我已经安排了凌晨 3 点的事情，这样我就可以现在解决它，而不是稍后当我的活动邀请列表上的某个人通过电子邮件说“你这个白痴，你将我们的 D&D 聚会安排在凌晨 3 点！”

【讨论】：

哈利路亚！我讨厌年份下拉菜单。很高兴我不是唯一一个。
另一个帮助确保输入正确的好方法是以实时更新的明确格式将解析的时间显示给用户。 [12/11/2012 3:00] --> "2012 年 12 月 12 日下午 3:00"

【解决方案3】：

我认为 Google 日历上的日期范围条目非常好。您可以通过键盘或鼠标输入。唯一的问题是输入不同年份的日期。

您可以通过键盘轻松完成，但日历上应该有第二组小箭头，可以使用鼠标一次来回跳转一年。

编辑：在回答这个问题时，“如果您想安排一个从周二晚上 11 点到周三凌晨 1 点的活动（例如，每日构建）怎么办？您如何结束时间？半夜？”

如果“到”时间超过了午夜，则将“到”日期滚动到第二天。这只是组件业务逻辑的一部分。您会注意到在上面的第二张图片中，下拉菜单同时指示了事件的结束时间和持续时间，这应该是一个提示。

如果您尝试将结束日期设置为早于开始日期，您可以突出显示字段的背景颜色和/或在保存时显示错误消息。

在Google Calendar 上玩一玩，看看它的表现如何。

【讨论】：

如果您想安排一个从周二晚上 11 点到周三凌晨 1 点的活动（例如每日构建），该怎么办？你如何在午夜结束时间？

【解决方案4】：

我建议您也允许喜欢键入而不是单击日历控件的用户，因此文本框 + 弹出日历的组合效果很好。

我们使用这种组合创建了一个自定义控件。用户可以在文本框中输入多种格式的日期，或者点击按钮弹出日历。

我们允许各种输入，例如“today”、“wed”或“+2”（表示后天），并在大多数验证客户端使用正则表达式。当然，我们还进行服务器端验证。

该控件还有一个可选的时间文本框，可以通过属性启用或隐藏。我们觉得将日期与时间分开更容易。对于时间，我们允许“9pm”、“2100”、“09:00”等。

该控件适用于最小和最大日期，因此出生日期的范围可以从 -100 年到当年，而信用卡到期日的范围可能从当年到 +5 年，因此我们使用范围验证器。

【讨论】：

【解决方案5】：

我的选择是带有图像链接到侧面弹出日历的文本框。两全其美。

如果你想要一些额外的东西，你可以让像 Chronic http://chronic.rubyforge.org/ 这样的自然语言日期/时间解析器为它增添趣味。

也不要忘记国际用户。

【讨论】：

【解决方案6】：

如果您要选择组合框/列表框选项，请确保将月份设为“Jan”、“Feb”...“Dec”而不是“1”、“2”... “12”。
不得不根据值的范围来确定哪个槽是月份，哪个是日期，这很烦人。

【讨论】：

【解决方案7】：

我会根据情况选择三种替代方案：

2 个组合框。一个上市年份+月份，另一个上市日期
3 个组合框。一上市年一月一日
可见日历和组合like this one from YUI

而且我相信我会选择更多选项。

【讨论】：

【解决方案8】：

您需要检查您的 UI 要求。如果您只想要启用脚本的支持，您可以使用您的任何脚本，并以它们在隐藏字段中提供的任何日期/时间格式运行。

但是，如果您需要在文本框中输入用户条目，那么您将面临一些决定：

日期/时间格式是固定的吗？例如仅限 mm/dd/yyy hh:mm:ss 格式？
或松散定义，以允许“今天”、“明天”、“1 月 23 日”样式条目？
格式是否特定于区域设置？例如mm/dd/yyyy 与 dd/mm/yyyy

验证方法取决于您对需求的决定。

我喜欢jQuery date-picker 插件。它将允许以特定格式输出。

【讨论】：

【解决方案9】：

连续显示多个月份的日历：http://www.cs.helsinki.fi/u/salaakso/patterns/Calendar-Strip.html

【讨论】：

【解决方案10】：

我一直觉得 Google 日历在这方面很容易使用。你当然可以比试图模仿它做得更糟。关键是在用户输入信息的方式上给予用户很大的灵活性。例如，我可以从下拉列表中选择时间或手动输入，当我输入时，我不需要在“pm”中包含冒号或“m”。

【讨论】：

【解决方案11】：

我真的很喜欢 QT4 的日期/时间小部件的工作方式。

您可以手动输入日期（以常用格式输入日期）。
您可以使用滚轮快速更改日期/时间字段。
您有一个可扩展的日历，其中包含月份的下拉和前进/后退箭头。您可以点击特定日期并手动输入年份，也可以使用组合框（滚轮也可以在这里使用）。

这是一个简短的视频 (~7.5MB)，展示了小部件的工作原理以及它的一些功能：Video Here

我希望任何复杂的应用程序都具有部分或全部这些功能。

能够输入相对日期（今天、上周、3 天前）很方便，但我不确定它是否实用，例如“您的出生日期是多少？”或“您希望 X 何时通过电子邮件发送给您？”。

【讨论】：

【解决方案12】：

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

【讨论】：