jQuery时间选择器

Question

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

Answer 1

我发现this plugin（github repository）胜过提到的另一个。它模仿Google Calendar的时间戳。

Answer 2

我尝试了大量的时间选择并且不满意所以我写了另一个。我认为它运作良好。它也受到日期选择器的启发，所以它看起来像标准的jQuery UI。

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

http://fgelinas.com/code/timepicker

Answer 3

我的建议是不要这样做。我发现很难被迫使用日历控件来输入日期，特别是当没有选择输入日期时我可以比导航另一个古怪的控件更快。

时间选择器只是将这种UI迷信带到一个新的极端。为什么不让用户输入时间或只使用几个下拉框几小时和几分钟。即使是下拉列表也允许用户只输入时间。 Shog9's answer中的时间选择器非常好看，但使用起来非常繁琐。如果我是最终用户必须使用数据输入应用程序并且它在页面上有这样的控件那么它只会让我放慢速度并让我想要切断开发人员的手。 ：）

在应用程序看起来光滑之前先考虑可用性。

我的拙见。

Answer 4

这不是jQuery ......但是我发现下拉列表包含15分钟的时间间隔，上午8:00，上午8:15，上午8:30，等等，对用户来说非常容易与...互动。

不确定你真的是否需要一种jQuery方式来做这件事......可能有点矫枉过正。根据我对真实用户和开发业务应用程序的个人经验，提出意见。

Answer 5

如果您有兴趣使用好时间解析器并允许用户输入各种有效时间字符串（上午8:00，上午8点，8点，8点等），请查看{{3} }。

这是我用来处理它的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'))
});

Answer 6

我认为除了Kev之外，每个答案都是主观的。我已经在网上看过十分之一的时间选择器JQuery插件，而且大多数都是无用的噱头，但如果你已经使用标准的Jquery datepicker，则this plug-in是合适的。

Answer 7

查看Maxime Haineault的jQuery.timepicker。非常酷，恕我直言......

Answer 8

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

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

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

Answer 9

试试这个很棒的lib - http://code.google.com/p/mobiscroll/

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

Answer 10

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

Answer 11

我一直在使用Trent Richardson's timepicker library并且发现它很棒。根据下载次数，它也非常受欢迎。

Answer 12

我的情况略有不同，我需要一个日期时间选择器，但也找不到。所以我决定写一个。你可以找到full source here;我还发布了a quick demo。

Answer 13

I wrote one基于Jim提到的插件（就像谷歌日历时间选择器一样）但它使用jquery ui自动完成功能。它比上述插件更稳定。我有一个问题，那个位置在页面上。该插件采用数组，时间范围和间隔或ajax源...因此您可以根据自己的内容对其进行自定义。

Answer 14

虽然没有标准版，但我一直在使用jQuery plugin from Keith Wood。与某些文件框不同，它会降级为文本框（您仍然可以输入，同时仍然执行验证），如果您愿意，还可以使用鼠标。

Answer 15

我找不到一个符合我想要的插件（即多列自动完成与时间输入屏蔽相结合），所以我写了MenuOptions

它看起来像什么

Answer 16

Any+Time™ DatePicker/TimePicker AJAX Calendar Widget允许时间选择，当使用鼠标时，其速度与手动输入一样快，但具有防止错误的额外好处。时间可以任何必要的格式化。它还支持键盘操作，尽管键盘访问不像鼠标或打字那么快......但同样，它保证了值将采用所需的格式。它也很容易定制，也可以处理日期。