15

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

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

基本注意事项

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

流行的解决方案包括：

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

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

相关问题：描述时间范围的最佳 GUI 控件

4

12 回答 12

14

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

Enter a date [        ] [...]

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

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

"today"
"Tomorrow"
"23 Jan"

等等

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

于 2009-02-23T21:17:18.480 回答
12

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

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

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

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

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

于 2009-02-23T21:49:05.033 回答
4

我认为谷歌日历上的日期范围条目相当不错。您可以通过键盘或鼠标输入。唯一的问题是输入不同年份的日期。

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

日期输入示例

时间输入示例

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

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

替代文字

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

替代文字

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

于 2009-02-23T22:51:10.657 回答
2

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

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

也不要忘记国际用户。

于 2009-02-23T21:12:56.993 回答
2

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

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

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

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

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

于 2009-02-23T21:24:55.573 回答
1

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

于 2009-02-23T21:58:06.133 回答
0

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

  1. 2个组合框。一个上市年+月，另一个日
  2. 3个组合框。一上市年一月一日
  3. 来自 YUI的可见日历/s 和组合，例如这个

而且我相信还有更多的选择可以选择。

于 2009-02-23T21:28:12.743 回答
0

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

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

  • 日期/时间格式是否严格？例如，仅 mm/dd/yyy hh:mm:ss 格式？
  • 或者松散定义，以允许“今天”、“明天”、“1 月 23 日”样式条目？
  • 格式是否特定于语言环境？例如 mm/dd/yyyy 与 dd/mm/yyyy

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

我喜欢jQuery 日期选择器插件。它将允许以特定格式输出。

于 2009-02-23T21:28:13.977 回答
0

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

于 2009-02-23T21:40:30.997 回答
0

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

于 2009-02-23T21:42:24.237 回答
0

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

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

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

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

能够输入相对日期（今天、上周、3 天前）很方便，但我不确定它是否实用，考虑到诸如“你的出生日期是什么时候？”或“你什么时候可以”这样的标准问题就像 X 通过电子邮件发送给你的一样？”。

于 2009-02-23T22:23:53.187 回答
0

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

在此处输入图像描述

于 2014-03-26T14:54:26.623 回答