填充时间(或者时间范围)的最有效方法是什么?

时间:2020-03-05 18:42:41  来源:igfitidea点击:

尽管存在许多用于输入日期的解决方案(例如日历,下拉菜单等),但似乎并没有太多"标准"方式询问时间(或者时间范围)。

我亲自尝试了小时,分钟和第二个字段(有时也包括" AM / PM"字段)的下拉菜单。我还尝试了几种类似时钟的输入设备,其中大多数对于典型的最终用户来说太难使用了。我什至尝试了"弹出"时间选择菜单(例如,我们可以将其悬停在小时" 10"上,以接收包含":00",":15",":30"的子菜单) "和":45")-但这些方法似乎都不自然。

到目前为止,我发现的最好的(也是最通用的)方法只是使用简单的文本字段,并强迫用户手动填充小时,分钟和秒。另外,我在创建类似于Outlook的"日视图"方面有很好的经验,它允许我们拖放事件以设置开始时间和结束时间。

是否有"最佳方法"来询问此信息?是否有人在使用真正直观且易于使用的某种类型的时间输入小部件?还是至少有一种方法比使用纯文本框更有效?

解决方案

回答

JQuery有一个非常有用的时间输入工具。除了标准文本字段外,它还提供了"旋转器"类型的方法。它还支持使用鼠标滚轮进行调整(以及传统的"只键入它"方法),并且可以根据需要将其配置为限制为n分钟。它是非常可定制的,支持本地化和多种其他设置,我已经在几个项目/演示站点中成功使用了它。

回答

我非常喜欢简单的语言输入(前几天有一个主题)。我喜欢37signals背包日历让我们输入内容的方式(08/12 3pm与Tom开会)。我也喜欢他们通过提醒系统处理时间的方式(他们为我们提供了一些选择,例如今天晚些时候,明天早上)。

回答

我发现Google日历的方法是最好的。使用文本框,但使用JavaScript使其成为用于选择时间的下拉菜单。可以在此处找到有关jQuery实现的良好演示

我尚未在我的网站上实现此功能,所以我不确定100%,但是我认为我们还需要此jQuery插件的代码:
http://www.texotela.co.uk/code/jquery/timepicker/

编辑
我发布的第一个链接不需要第二个链接的代码。它只是基于它。要从示例中获取实际的JavaScript文件,我们可以查看页面的源代码以查找文件的位置,也可以直接转到URL
http://labs.perifer.se/timedatepicker/jquery.timePicker.js