2009-02-23 17 views
15

这是一个多年来一次又一次重新发明的车轮。从用户那里获取日期/时间输入的最佳方法是什么?

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

基本考虑

  • 我们想让它尽可能容易为用户输入所需的日期/时间
  • 有些应用程序需要过去的日期,有些应用程序只需要将来的日期,有些需要同时处理
  • 我们希望防止用户输入乱码数据
  • 我们希望尽可能积极地自动填充此控件。
  • 我们希望此控件尽可能重复使用。

流行的解决方案包括:

  • 文本框
  • 组合框
  • 通过弹出的日历
  • 服务器端和/或客户端验证
  • 各种警报的方式关于坏数据的用户

有关于即食食品的全面解决方案,但我正在寻找更多的一般信息。是否有任何有关各种日期 - 时间控制方法的可用性研究?那里是否有“最佳”日期时间控制?有没有完善的“Dos和Don'ts”?


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

+2

+1用于使用单词“panopoly”来描述这个! – 2009-02-23 21:11:31

+1

@Chris:是的,这比“过度”更好! – 2009-02-23 21:19:16

回答

12

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

  • 2012年12月21日
  • 21DEC2012
  • 12月21日2012
  • 2012年12月21日(或21/12/2012,挑一个,也许这取决于我使用的是哪个国家的软件)
  • 12212012(括号一样如上片段)
  • 等等

无论您决定如何解决本地化问题,请确保它明显符合您的期望。给我一个例子,或者可以输入MMDDYYYY的模板。

请不要给我下拉框,我不得不滚动,特别是多年。如果我年纪大了,而且我正在进入我的DOB,我的生活中没有足够的时间往下滚动到下拉框的底部。当我不知道选项是什么时,下拉框是一个很好的模式,但如果这是我熟悉的东西,比如我的出生日期,那么下拉菜单是一件麻烦事。

现在,WRT时间输入(Big pet peeve),不要以为我的意思是凌晨3点。如果我输入3,那么假设我的意思是下午3点。让我在凌晨3点做额外的工作安排一些事情。如果您不适合以我的名义承担这么多事情,至少要提醒我已经预定了凌晨3点的时间,所以我现在可以修复它,而不是稍后当有人在我的活动邀请列表中发送电子邮件并说“你是白痴,你预定我们的D & D Meetup 3点!“

2

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

如果你想要额外的东西,你可以让自然语言的日期/时间解析器如Chronic http://chronic.rubyforge.org/为它增色。

也别忘了国际用户。

14

我的选择是用一个省略号按钮文本输入旁边:

Enter a date [  ] [...] 

的省略号会弹出一个日历来填充文本输入,但如果他们希望用户可以键入日期。当按下表格的“确定”按钮时,应该进行验证 - 根据我的经验,尝试对每个字符的字符进行日期验证注定。

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

"today" 
"Tomorrow" 
"23 Jan" 

等。

编辑:在回复一些评论时,当文本编辑失去焦点时(虽然我讨厌那种事情),编辑内容可能会从“23 Jan”更改为“23- 01-2009“表示该表达式已被理解。

+1

如果没有弹出窗口,日期验证可能会有效,但颜色/粗体文本/这样的东西会改变。不过,这是一个很好的提示,+1。 – mghie 2009-02-23 21:20:08

+0

是关于允许提供的样本等表达式。如果我只是输入“5”,我的意思是本月5日,今年,这一次,如果你需要时间,其他明智的没有时间或午夜。用户喜欢的另一个快捷键是2009年2月23日的022309。其中一些快捷键可以在数字键盘上快速打开。 – Bratch 2009-02-23 21:27:50

2

我建议你也允许喜欢打字而不是点击日历控件的用户,所以文本框+弹出式日历的组合很好。

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

我们允许各种输入,比如“今天”,“结婚”或“+2”(后天),并使用大多数验证客户端的正则表达式。我们也做服务器端验证当然。

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

对照满足最小和最大日期,以便出生日期可以具有从-100年到当前的范围年,而信用卡到期时间可能会从当年到+5年不等,所以我们使用范围验证器。

0

我会去视情况而定三个备选:

  1. 2组合框。一个上市年份+月份,另一天
  2. 3个组合框。一个上市多年,一个月1天
  3. 可见日历/ s和连击like this one from YUI

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

0

您需要检查您的用户界面要求。如果您只需要支持脚本的支持,那么您可以随意使用任何脚本,并使用提供给隐藏字段的任何日期/时间格式运行。

但是,如果你需要在一个文本框,用户条目,那么你就面临着一些决定:

  • 是日期/时间格式刚性?例如mm/dd/yyy hh:mm:ss格式?
  • 还是松散的定义,允许“今日”,“明天”,“1月23日”风格条目?
  • 格式是特定于语言环境的吗?例如mm/dd/yyyy与dd/mm/yyyy

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

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

0

我一直认为谷歌日历容易在这方面使用。你当然可以做得比试图效仿它更糟糕。关键是要让用户在输入信息方面有很大的灵活性。例如,我可以从下拉列表中选择一个时间或手动输入时间,当我输入时,我不需要在“pm”中包含冒号或“m”。

1

如果您打算使用组合框/列表框选项,请确保您将月份读取为“Jan”,“Feb”...“Dec”而不是“1”,“2”.. “12”。
根据值的范围,必须找出哪个月份是哪个月份以及哪一天是相当烦人的。

0

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

  • 您可以手动输入日期(在日期中输入常见格式)。
  • 您可以使用滚轮快速更改日期/时间字段。
  • 你有一个可扩展的日历,有几个月的下拉月份和向前/向后的箭头。您可以点击特定日期并手动输入年份,或者使用组合框(滚轮也可以在此工作)。

这里是一个简短视频(〜7.5MB),显示了如何将小部件工作原理,以及它的一些特点是:Video Here

我希望任何复杂的应用程序有一些或所有这些功能。

能够输入相对日期(今天,上周,3天前)是方便的,但我不确定它有多实用,因为标准问题如“您的出生日期?”或“你什么时候想把X发送给你?”

4

我认为Google日历上的日期范围条目相当不错。您可以通过键盘或鼠标进行输入。唯一的狡辩就是输入不同年份的日期。

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

Date Entry Example http://s5.tinypic.com/2qscw28.jpg

Time Entry Example http://s5.tinypic.com/3518f7q.jpg

编辑:在回答这个问题,“如果你要计划,从晚上11点的推移周二至凌晨1时在周三的事件(比如每日构建,例如)?如何在午夜覆盖时间?

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

alt text http://s5.tinypic.com/15hlb8m.jpg

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

alt text http://s5.tinypic.com/2yplphy.jpg

玩上Google Calendar,看看它是如何工作。

0

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

enter image description here

相关问题