jQuery时间选择器

72

我希望用用户可以每15分钟选择一次的时间来填充文本输入。我知道那里有一些插件。我想知道是否有任何“行业标准”插件，或者出于强烈的客观原因而倾向于在常见情况下使用特定插件。

javascript jquery time

— 贝纳多
source

感谢您的所有回答，它们对您很有帮助！

— 贝尔纳多（Bernardo）

1

根据所需的粒度，可以使用滑块控件。看看kayak.com以及它们如何使用结果页面中的滑块设置时间范围。我用它来影响一个时间范围，但是它也可以很好地用于设置时间。

— 凯文

86

我发现这个插件（github仓库）胜过提到的另一个插件。它模仿Google日历的时间选择器。

— 吉姆·格尔茨
source

7

+1常识。我很乐意看到OP改变主意并接受这个答案。

— 凯夫

2

这个插件根本无法很好地处理无效条目。如果我输入“ abc”，它将变成“ 2:00 AM”。

— RMorrisey 2011年

3

的链接this plugin已断开。您可以修复/删除它吗？

— 2014年

35

我尝试了很多时间选择器，但不满意，所以我写了另一个。我认为效果很好。它还受datepicker的启发，因此它看起来像标准的jQuery UI。

默认的分钟增量为5，可以在选项中设置为15。

http://fgelinas.com/code/timepicker

— 弗朗索瓦·吉利纳斯
source

1

尼斯弗朗索瓦+1我看过演示的，可能很快就会有机会玩！

— jwwishart '02

1

我真的很喜欢Francois插件。1）它允许@Kev的高级用户手动输入2）不需要滚动3）人类将时间视为上午/下午，然后是小时然后是分钟（增加了特异性），而不是从午夜开始的连续的小时和分钟。这就是Francois向您的用户展示时间的方式。

— SooDesuNe

2

为了击败死马，需要您滚动时/分列表（1：15、1：30、1：45等）的时间选择器插件与要求您滚动的日期选择器完全相同一天内下降的天数/月数（1月1日，2月1日，3月1日）。我从未见过有人认为这是个好主意。

— SooDesuNe 2011年

1

感谢您创建此插件-这是我见过的最有用的插件，最终用户告诉我他们觉得它非常易于使用。

— 马特

2

感谢您抽出宝贵的时间制作jQuery UI友好的时间选择器。

— jrummell 2012年

20

我的建议是不要这样做。我发现被迫仅使用日历控件输入日期已经够糟糕了，尤其是在没有输入日期的选项的情况下，我可以比导航另一个古怪的控件更快地进行操作。

时间选择器只是将这种UI迷信带到了一个新的极端。为什么不让您的用户输入时间或仅使用几个下拉框输入小时和分钟。甚至下拉列表也允许用户仅输入时间。Shog9的答案中的时间选择器看起来非常好看，但使用起来却非常笨拙。如果我是最终用户，必须使用数据输入应用程序，并且页面上具有类似控件的控件，那么它只会使我放慢速度，并使我想要离开开发人员。:)

请先考虑可用性，然后再看应用程序的外观。

只是我的拙见。

— 凯夫
source

2

如果您同时提供这两个选项，那么我就没问题，只要您没有强迫用户在可以输入日期/时间的完美文本框内输入日期/时间选择器的方式工作。这适用于同一类型的用户（例如数据输入人员或呼叫中心人员）反复使用的页面。

— 凯夫

27

-1，因为该问题是针对时间选择器的，并且接受的答案是“不”。我敢肯定，有很多插件允许手动输入和ui单击。

— dotjoe 2010年

3

@dotjoe-如何引用这些示例之一，以及没有大量可用性问题的示例。

— 凯夫

11

-1是因为正确使用时间选择器可以防止用户以错误的格式输入时间，这可能会导致垃圾结果。使用自由格式输入时，您必须在输入后验证输入，如果输入与所需格式不匹配，则可能会抱怨。为了获得最佳可用性，您应该使用尽可能不引人注目的方法来防止输入错误，而不要抱怨输入（没人喜欢被告知做错了什么）。

— Andrew M. Andrews III

4

@Kev，高速数据输入人员是不需要输入帮助的高级用户。伐木工人使用的链锯没有消费者模型所具备的所有安全功能。就是说，我过去常常查看由高速数据输入人员输入的薪水单，每批至少有一张薪水完全无法辨认，因为操作员的手指放在错误的按键上，甚至不费心去核实他们在打字什么。

— Andrew M. Andrews

10

这不是jQuery ...，但我发现一个下拉菜单（带有15分钟的时间间隔列表），即8:00 AM、8:15AM、8:30AM等，对于用户而言非常容易进行交互。

不知道您是否真的需要使用jQuery的方法来执行此操作……可能是过大的选择。只是基于我个人经验的一种看法真实用户和开发业务应用程序方面的。

— Mattruma
source

8

如果您对使用良好的时间解析器感兴趣并且允许用户输入各种有效时间字符串（8:00 AM，8AM，8a，8等）感兴趣，请访问http：//www.datejs .com /。

这是我用来处理的jQuery代码。

$('.time').blur(function (e) {
    var val = $(this).val();
    if (!isNaN(val))
        // add minutes to numeric value otherwise it will be interpreted as a date
        val = val + ':00'; 
    var dt = Date.parse(val);
    $(this).val(dt.toString('h:mm tt'))
});

— 布赖恩
source

2

Sugar看起来像是DateJS的有趣替代品。它具有许多日期/时间方法，还包括许多其他JS增强功能。

— 布莱恩

5

我认为除Kev答案外，所有答案都是主观的。我已经在网上看到了十分之一的时间选择器JQuery插件，并且大多数都是无用的耗时的头，但是如果您已经使用了标准的Jquery datepicker，那么此插件将是合适的。

— 博格丹
source

4

-1有很多我无法计数的原因。首先-Kev的回答也完全是主观的。他只是在发表意见。第二-您的答案完全是主观的。第三，从UI的角度来看，那个时间选择器插件是我所看到的唯一比Shog9建议的更糟糕的东西。最后，您的答案应该是答案，而不是对其他答案的评论。这就是评论的目的。我想我可以算出答案的问题了-有四个。

— Charles Boyung

感谢您的观察。您几乎在每个帐户上都是对的:)，但是我没有说我推荐的插件是最好的，只是它与JQuery datepicker配合得很好...也许我应该以不同的方式制定它。

— S Bogdan

4

查看Maxime Haineault的jQuery.timepicker。太酷了，恕我直言...

— 刺9
source

19

很酷但使用起来很糟糕

— Espen

4

我不同意它的酷，并同意@Espen的用法，这太可怕了。

— Charles Boyung

6

任何仅通过将鼠标移到控件上来更改值的UI数据输入小部件都是一个坏主意。这样可以轻松地意外更改输入值。

— 克里斯·米勒

它以更糟糕的方式处理手动输入（忽略它们）。

— Mahmoodvcs

4

我用过的最好的是Telerik提供的那种。

http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx

它不打扰，让用户只需输入时间或单击时钟图标即可从列表中进行选择。基本上，这只是使用可编辑下拉菜单的更具美学吸引力的方法。

— 梅里特
source

太糟糕了，没有适用于asp.net mvc的版本

— Adrian Grigore 2010年

有demos.telerik.com/aspnet-mvc/DatePicker

— Merritt

而且我不为Telerik工作。我喜欢其中一些东西，其他我讨厌的东西。例如，RadWindow。eh

— 梅里特2010年

我是在做错什么，还是该时间选择器确实不允许输入晚上11:01到午夜之间的时间？

— Martha

4

试试这个伟大的lib- //code.google.com/p/mobiscroll/

演示-http: //demo.mobiscroll.com/

— 尼基塔·科克肖罗夫（Nikita Koksharov）
source

3

这是我对此主题的尝试：http: //yoka.github.com/jquery-timeselect/

— 约卡
source

3

我一直在使用Trent Richardson的时间选择器库，发现它很棒。从下载数量来看，它也是一种非常流行的方式。

— 忍者
source

遍历整个列表，从UI的角度来看，这是最干净的一个IMO-应该是选择的答案。+1

— Jordan Arseno 2012年

1

我写了一个基于吉姆提到的插件（类似于Google日历时间选择器），但是它使用jquery ui自动完成功能。它比上述插件要稳定得多。我在页面上定位该对象时遇到了问题。该插件需要一个数组，时间范围和时间间隔或ajax源...因此您可以根据自己的喜好自定义内容。

— 危险品
source

听起来不错。您有该插件的演示站点吗？

— 阿德里安·格里戈里

我还没有，但是我确实在自己的网站上使用它。您可以转到snirk.snirk.com并单击计划外的块。它将弹出一个使用插件的对话框（开始时间）。

— hazmat

1

尽管没有标准版本，但我一直在使用Keith Wood的jQuery插件。与某些语言不同，它会降级为文本框（您仍可以在输入文本的同时仍在执行验证），并且如果您愿意，也可以使用鼠标。

— 罗兰·肖
source

1

我的情况略有不同，我需要一个日期时间选择器，但也找不到。所以我决定写一个。您可以在此处找到完整的源代码；我还发布了一个快速演示。

— 佩特拉
source

1

我找不到符合我想要的功能的插件（即，多列自动完成功能与输入掩膜功能相结合），所以我编写了MenuOptions

看起来像什么

— 美基
source

0

在任何时间+™的DatePicker / TimePicker AJAX日历空间允许的时间选择哪个，使用鼠标时，大约是尽可能快地用手打字，但有错误预防的好处。时间可以采用任何必要的格式。它也支持键盘操作，尽管诚然，键盘访问不如鼠标或键入那么快...但是，再次保证了该值将采用所需的格式。它也易于自定义，还可以处理日期。

— 安德鲁·M·安德鲁斯三世
source