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

15

这是一件多年来不断被重新发明的轮子。

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

基本考虑

  • 我们希望使用户尽可能轻松地输入所需的日期/时间
  • 某些应用程序需要历史日期,某些应用程序仅需要未来日期,有些需要处理两者
  • 我们希望防止用户输入无意义的数据
  • 我们希望尽可能积极地自动填充此控件。
  • 我们希望此控件尽可能可重用。

流行的解决方案包括:

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

有许多现成的解决方案,但我正在寻找一些更一般的信息。是否进行过任何有关各种日期时间控件方法的可用性研究?是否存在最好的日期时间控件?是否有任何已经建立的“做”和“不做”的规则?


相关问题:最佳GUI控件以描述时间范围


2
+1 用“panopoly”这个词来描述这个内容! - Chris Ballance
1
@Chris:是的,这甚至比“plethora”更好! - Michael Myers
12个回答

14

我更喜欢一个文本输入框旁边带有省略号按钮:

Enter a date [        ] [...]

省略号会弹出一个日历以填充文本输入,但用户也可以手动输入日期。当表单的“确定”按钮被按下时应进行验证 - 从字符到字符地进行日期验证是注定要失败的,根据我的经验。

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

"today"
"Tomorrow"
"23 Jan"

等等。

编辑:回复一些评论,当文本编辑器失去焦点时可以进行验证(虽然我讨厌那种事情),在这种情况下,编辑内容可以从“23 Jan”更改为“23-01-2009”,以表示已经理解了表达式。


1
日期验证可能有效,如果没有弹出窗口,但是颜色变化/加粗文本/类似这样的东西仍然可以起到作用。不过,这是一个好提示,+1。 - mghie
是的,关于允许像提供的示例那样的表达式。如果我只输入“5”,那么我指的是这个月的第5天,今年的第5天,如果需要时间,则为此时间,否则没有时间或午夜。用户喜欢的另一个快捷方式是022309表示2009年2月23日。他们中的一些人可以在数字键盘上快速输入。 - Bratch
@Bratch:在像 022309 这样的表达式上必须小心。如果是 021009,那是2月10日还是10月2日?或者甚至是2002年10月9日? - Michael Myers
+1 给 mmyers。这是一个国际化问题。世界上很多地方都习惯使用 DDMM,但美国则经常使用 MMDD。 - Scottie T
这取决于你是否国际化,但如果它只是美国本土,也许是内部局域网,那么预期使用的是MMDDYY格式。一定要小心谨慎。当然,对我们来说YYYYMMDD是最好的选择。 - Bratch
2
我喜欢这种日期输入样式,但是我会在按钮上使用一个小日历图标。有多少用户实际上知道省略号在这个上下文中的含义?另外,如果假设了特定的日期格式,那么可能应该在某个地方显示格式的示例(MMDDYY)。 - Kurt W. Leucht

12

给我一个可以用鼠标选择日期的日历,并允许我用键盘输入日期。支持尽可能多的格式。如果我需要输入2012年12月21日,让我可以使用以下格式之一:

  • Dec 21 2012
  • 21DEC2012
  • December 21 2012
  • 12/21/2012(或者21/12/2012,请根据软件使用的国家选择一个)
  • 12212012(同上一条)
  • 等等

无论你决定如何解决本地化问题,都要确保用户能够明白你的期望。给我一个示例,或者一个可以输入 MMDDYYYY 的模板。

请不要给我下拉框,因为我不想滚动浏览年份。如果我是老人,并且正在输入我的出生日期,我没有足够的时间来滚动到下拉框的底部。下拉框适用于当我不知道选项是什么时使用,但如果它是我非常熟悉的事物,比如我的生日,那么下拉菜单会很麻烦。

现在,关于时间输入(最讨厌的事情),请不要假定我指的是早上3点。如果我输入3表示时间,请假定我指的是下午3点。让我额外付出努力来安排早上3点的事情。如果你不确定我的意思,至少告诉我我已经安排了一个早上3点的活动,这样我就可以在邀请名单上的某个人发邮件并说“你这个蠢货,你把我们的D&D聚会安排在了早上3点!”之前就能立即修复它了。


1
哈利路亚!我讨厌年份下拉菜单。很高兴不是只有我一个人这样想。 - Michael Itzoe
另一种确保输入正确的好方法是以实时更新的方式,将解析后的时间以明确无误的格式显示给用户。[12/11/2012 3:00] --> "12-Dec-2012 3:00 pm" - antiduh

4
我认为Google日历的日期范围输入非常好。您可以通过键盘或鼠标输入。唯一的问题是输入不同年份的日期。
您可以很容易地通过键盘完成,但他们应该在日历上添加第二组小箭头,以便使用鼠标一次跳转一年前进或后退。

Date Entry Example

Time Entry Example

编辑:针对问题“如果您想安排从周二晚上11点到周三凌晨1点的事件(比如每天构建),该怎么办?如何跨越午夜包装时间?”的回答是:

如果“到”时间将其推到午夜以后,则将“到”日期滚动到第二天。这只是组件业务逻辑的一部分。如上面的第二个图像所示,下拉菜单显示了事件的结束时间和持续时间,这应该是一个提示。

alt text

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

alt text

Google日历上尝试一下,看看它的表现如何。


如果您想安排一个从周二晚上11点持续到周三凌晨1点的事件(例如每日构建),该如何跨越午夜? - Ryan

2

我选择带有弹出式日历图像链接的文本框,最好两全其美。

如果您想要额外的功能,您可以使用自然语言日期/时间解析器,例如Chronic http://chronic.rubyforge.org/ 来增强它。

另外,请不要忘记国际用户。


2
我建议您还应该考虑那些喜欢键入而不是点击日历控件的用户,因此文本框+弹出式日历的组合效果很好。
我们创建了一个自定义控件,正是这样的组合。用户可以在文本框中以各种格式输入日期,或者单击按钮弹出日历。
我们允许各种输入,例如“今天”,“星期三”或“+2”(表示后天),并且大多数客户端验证都使用正则表达式。当然,我们也进行服务器端验证。
该控件还具有可选的时间文本框,可以通过属性启用或隐藏。我们认为将日期和时间分开会更容易。对于时间,我们允许“晚上9点”,“2100”,“09:00”等等。
该控件适用于最小和最大日期,以便出生日期可以从-100年到当前年份范围内,而信用卡到期日期可能范围从当前年份到+5年,因此我们使用范围验证器。

1
如果您选择组合框/列表框选项,请确保将月份显示为“Jan”,“Feb”...“Dec”,而不是“1”,“2”...“12”。这样做可以避免根据值的范围来确定哪个插槽是月份,哪个是日期的烦恼。

0

你可以使用插件cxcalendar。它看起来像其他的日期选择器,但是你可以在点击年月标题后,在下拉菜单中选择年份和月份。

enter image description here


0

根据情况,我会选择三种备选方案:

  1. 2个组合框。一个列出年份+月份,另一个列出日
  2. 3个组合框。一个列出年份,一个列出月份,一个列出日
  3. 可见日历和组合框 类似于YUI中的这个

我相信还有更多的选择,我会从中选择。


0

您需要检查您的UI需求。如果您只需要支持脚本,那么您可以选择任何一个脚本,并将其提供的日期/时间格式运行到隐藏字段中。

然而,如果您需要用户在文本框中输入日期/时间,则需要做出一些决策:

  • 日期/时间格式是否严格?例如仅限mm/dd/yyyy hh:mm:ss格式?
  • 还是宽松定义,允许“今天”、“明天”、“1月23日”等样式的输入?
  • 格式是否与语言环境相关?例如mm/dd/yyyy与dd/mm/yyyy之间的区别。

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

我喜欢jQuery date-picker插件。它可以按特定格式输出。


0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接