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

Question

这是多年来一次又一次重新发明的车轮。

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

基本考虑因素

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

热门解决方案包括：

• 文字框
• 组合框
• 弹出日历
• 服务器端和/或客户端验证
• 警告用户不良数据的各种方法

有一大堆即食解决方案，但我正在寻找一些更一般的信息。是否对各种日期时间控制方法进行了任何可用性研究？那里有“最佳”的日期时间控制吗？有没有完善的“Dos and Don'ts”？

---

相关问题：Best GUI control(s) to describe a time range

Answer 1

我的偏好是文本输入旁边有一个省略号按钮：

Enter a date [        ] [...]

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

验证应该是复杂的，并允许像

这样的表达式

"today"
"Tomorrow"
"23 Jan"

等

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

Answer 2

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

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

无论您决定如何解决本地化问题，请确保您的预期显而易见。给我一个示例，或者我可以输入MMDDYYYY的模板。

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

现在，WRT时间输入（Big pet peeve），不要以为我的意思是凌晨3点。如果我当时输入3，假设我的意思是下午3点。让我做额外的工作，在凌晨3点安排一些事情。如果你为代表我做了很多事情感到不舒服，至少提醒我，我已经安排了凌晨3点的事情，所以我现在可以修理它，而不是以后当有人在我的活动邀请列出电子邮件时说“你这个蠢，你安排我们的D＆amp; D Meetup凌晨3点！“

Answer 3

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

你可以通过键盘轻松地完成它，但是他们应该在日历上有第二组小箭头，一次使用鼠标来回跳跃一年。

编辑：在回答这个问题时，“如果你想安排一个从星期二晚上11点到星期三凌晨1点的事件（例如每日构建一次）怎么办？你怎么把时间包起来午夜？“

如果“到”时间将其推到午夜，则将“到”日期滚动到第二天。这只是组件业务逻辑的一部分。你会注意到在上面的第二张图中，下拉列表表示事件的结束时间和持续时间，这应该是一个提示。

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

在Google Calendar上游玩并查看其行为。

Answer 4

我选择了一个文本框，其中包含指向侧面弹出日历的图像链接。两全其美。

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

也不要忘记国际用户。

Answer 5

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

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

我们允许各种输入，例如“今天”，“结婚”或“+2”（后天），并为大多数验证客户端使用正则表达式。我们当然也会进行服务器端验证。

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

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

Answer 6

如果您要使用组合框/列表框选项，请确保将月份读为“Jan”，“Feb”...“Dec”而不是“1”，“2”...... “12”。
根据值的范围确定哪个槽是月份，哪个是哪一天，这是相当烦人的。

Answer 7

我会根据具体情况选择三种选择：

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

我相信我可以选择更多选项。

Answer 8

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

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

• 日期/时间格式是刚性的吗？例如mm / dd / yyy hh：mm：仅限ss格式？
• 或松散定义，以允许“今天”，“明天”，“1月23日”风格的条目？
• 格式是否特定于区域设置？例如mm / dd / yyyy vs. dd / mm / yyyy

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

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

Answer 9

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

Answer 10

我总是发现Google日历在这方面很容易使用。你当然可以比试图模仿它更糟糕。关键是为用户提供输入信息的灵活性。例如，我可以从下拉列表中选择一个时间或手动输入，当我输入时，我不需要在“pm”中包含冒号或“m”。

Answer 11

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

• 您可以手动输入日期（以常用格式输入日期）。
• 您可以使用滚轮快速更改日期/时间字段。
• 您有一个可展开的日历，该月份具有下拉月份和向前/向后箭头。您可以单击特定日期并手动输入年份，也可以使用组合框（滚轮也适用于此处）。

这是一段简短的视频（约7.5MB），展示了小部件的工作原理及其部分功能：Video Here

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

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

Answer 12

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