blocks|key|1642735|text|我发现this+plugin+(github+repository)胜过上面提到的另一个。它模仿谷歌日历的时间选择器。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1642736|entityMap|0|LINK|mutability|MUTABLE|url|http://labs.perifer.se/timedatepicker/|1|https://github.com/perifer/timePicker^0|3|B|0|G|H|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

I found <a href="http://labs.perifer.se/timedatepicker/" rel="noreferrer">this plugin</a> (<a href="https://github.com/perifer/timePicker" rel="noreferrer">github repository</a>) trumps the other one mentioned. It mimics Google Calendar's timepicker.

blocks|key|1428283|text|我尝试了大量的时间选择器，但并不满意，所以我又写了一个。我认为它工作得很好。此外，它的灵感来自于datepicker，所以它看起来像标准的jQuery+UI。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1428284|默认分钟增量为5，可以在选项中设置为15。|1428285|http://fgelinas.com/code/timepicker|offset|length|1428286|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Z|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

I tried a ton of timepicker and was not satisfied so I wrote [yet] another one. I think it works well. Also it is inspired from the datepicker so it looks like standard jQuery UI stuff.

The default minute increments is at 5 and can be set to 15 in the options.

<a href="http://fgelinas.com/code/timepicker">http://fgelinas.com/code/timepicker</a>

blocks|key|1427817|text|我的建议是不要这样做。我发现被迫使用日历控件来输入日期已经够糟糕的了，特别是当没有提供输入日期的选项时，我可以比导航另一个古怪的控件快得多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1427818|时间选择器将这种对UI的迷恋推向了一个新的极端。为什么不允许你的用户输入时间，或者只使用几个下拉框几个小时和几分钟。甚至连下拉列表都允许用户只输入时间。Shog9's+answer中的时间选择器看起来非常漂亮，但是使用起来非常麻烦。如果我是一个必须使用数据输入应用程序的最终用户，而它在页面上有一个这样的控件，那么它只会减慢我的速度，让我想要过来砍掉开发人员的手。:)|offset|length|1427819|在应用程序看起来有多漂亮之前，先考虑一下可用性。|1427820|这只是我的浅见。|1427821|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/476822/jquery-time-picker#476861^0|0|24|E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

My advice would be not to do this. I find it bad enough being forced to use a calendar control just to enter a date, especially when not given the option to type a date which I can do way quicker than navigating yet another wacky control. 

Time pickers just take this kind of UI fetish to a new extreme. Why not allow your users to either type the time or just use a couple of drop down boxes for hours and mins. Even drop down lists allow a user to just type the time. The time picker in <a href="https://stackoverflow.com/questions/476822/jquery-time-picker#476861">Shog9's answer</a> is all very nice to look at but is incredibly fiddly to use. If I was an end user having to use a data entry app and it had a control like that on the page then it's only going to slow me down and make me want to come and cut off the developers hands. :)

Think about usability first before how slick the app looks.

Just my humble opinion.

blocks|key|1642986|text|如果您对使用良好的时间解析器并允许用户输入各种有效的时间字符串(+8+:00AM、8AM、8a、8等)感兴趣，请查看http://www.datejs.com/。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1642987|下面是我用来处理它的jquery代码。|1642988|$('.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+%2B+':00';+
++++var+dt+=+Date.parse(val);
++++$(this).val(dt.toString('h:mm+tt'))
});|code-block|syntax|javascript|1642989|entityMap|0|LINK|mutability|MUTABLE|url|http://www.datejs.com/^0|1M|M|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

If you are interested in using a good time parser and allowing the user to enter in a wide range of valid time strings (8:00 AM, 8AM, 8a, 8, etc), take a look at <a href="http://www.datejs.com/" rel="nofollow noreferrer">http://www.datejs.com/</a>. 

Here is the jquery code I am using to work with it.

<pre><code>$('.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'))
});
</code></pre>

blocks|key|1428247|text|我认为，除了Kev的答案之外，每一个答案都是主观的。我已经在网上看到了十分之一的时间选择器JQuery插件，大多数都是无用的、耗时的花招，但是如果您已经在使用标准的Jquery+datepicker，那么this+plug-in将是合适的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1428248|entityMap|0|LINK|mutability|MUTABLE|url|http://trentrichardson.com/examples/timepicker/^0|2U|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I think every answer, except Kev's, is subjective. I've seen tenths of time-picker JQuery plug-ins on the net, and most were useless time consuming gimmicks, but if you already use the standard Jquery datepicker then <a href="http://trentrichardson.com/examples/timepicker/">this plug-in</a> would be appropriate.

blocks|key|1642575|text|看看Maxime+Haineault的jQuery.timepicker吧。很酷，我的.|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1642576|entityMap|0|LINK|mutability|MUTABLE|url|http://haineault.com/media/jquery/ui-timepickr/page/^0|J|H|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Check out Maxime Haineault's <a href="http://haineault.com/media/jquery/ui-timepickr/page/" rel="nofollow noreferrer">jQuery.timepicker</a>. Pretty cool, IMHO...

blocks|key|1428012|text|我用过的最好的是Telerik提供的那个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1428013|http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx|offset|length|1428014|它不显眼，用户只需输入时间或单击时钟图标即可从列表中进行选择。基本上只是一种更美观的使用可编辑下拉菜单的方法。|1428015|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|2L|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

The best I have ever used is the one offered by Telerik.

<a href="http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx" rel="nofollow noreferrer">http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx</a>

It is unobtrusive, letting the user just enter in the time or click on the clock icon to select from a list. Basically just a more aesthetically appealing method of using editable drop downs.

blocks|key|1428504|text|试试这个很棒的库--+http://code.google.com/p/mobiscroll/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1428505|演示-+http://demo.mobiscroll.com/|1428506|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/mobiscroll/|1|http://demo.mobiscroll.com/^0|B|10|0|0|4|R|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

Try this great lib - <a href="http://code.google.com/p/mobiscroll/" rel="nofollow">http://code.google.com/p/mobiscroll/</a>

Demo - <a href="http://demo.mobiscroll.com/" rel="nofollow">http://demo.mobiscroll.com/</a>

blocks|key|1428315|text|这是我在这个主题上的尝试：http://yoka.github.com/jquery-timeselect/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1428316|entityMap|0|LINK|mutability|MUTABLE|url|http://yoka.github.com/jquery-timeselect/^0|D|15|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Here is my try on the subject:
<a href="http://yoka.github.com/jquery-timeselect/" rel="nofollow">http://yoka.github.com/jquery-timeselect/</a>

blocks|key|1428575|text|我一直在使用Trent+Richardson's+timepicker+library，我发现它很棒。从下载量来看，它也是非常受欢迎的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1428576|entityMap|0|LINK|mutability|MUTABLE|url|http://trentrichardson.com/examples/timepicker/^0|6|11|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I have been using <a href="http://trentrichardson.com/examples/timepicker/" rel="nofollow">Trent Richardson's timepicker library</a> and have found it to be great. It is a very popular one too, by number of downloads.

blocks|key|1427951|text|我的情况略有不同，我需要一个日期时间选择器，但也找不到。所以我决定写一个。你可以找到full+source+here；我也发布了a+quick+demo。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1427952|entityMap|0|LINK|mutability|MUTABLE|url|http://www.yart.com.au//DateTime/TimeCalendar.js|1|http://www.yart.com.au/Resources/ASP-NET/ASP-NET-JQuery-Date-Time-Control.aspx^0|16|G|0|1S|C|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

My situation was slightly different, I needed a date time picker but couldn't find one either. So I decided to write one. You can find the <a href="http://www.yart.com.au//DateTime/TimeCalendar.js" rel="nofollow noreferrer">full source here</a>; I also posted <a href="http://www.yart.com.au/Resources/ASP-NET/ASP-NET-JQuery-Date-Time-Control.aspx" rel="nofollow noreferrer">a quick demo</a>.

blocks|key|1643041|text|I+wrote+one基于Jim提到的插件(工作方式类似于google日历时间选择器)，但它使用的是jquery+ui自动完成。它比前面提到的插件更稳定。我对它在页面上的定位有问题。这个插件接受一个数组，时间范围和间隔或者一个ajax源...所以你可以根据自己的喜好对其进行定制。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1643042|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/gdoermann/jquery.ui.timepicker^0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="http://github.com/gdoermann/jquery.ui.timepicker" rel="nofollow noreferrer">I wrote one</a> based off of the plugin Jim mentioned (works like google calendar time picker) but it works using jquery ui autocomplete. It is MUCH more stable than the afore mentioned plugin. I had issues with that one positioning itself on the page. The plugin takes an array, time range and intervals or an ajax source... so you can customize it to your hearts content.

blocks|key|1428346|text|虽然没有标准的版本，但我一直在使用jQuery+plugin+from+Keith+Wood。与某些浏览器不同的是，它退化为一个文本框(你仍然可以在文本框中输入，同时还可以执行验证)，如果你愿意的话，它也可以和鼠标一起使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1428347|entityMap|0|LINK|mutability|MUTABLE|url|http://keith-wood.name/timeEntry.html^0|H|T|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Whilst there isn't a standard one, I've been using a <a href="http://keith-wood.name/timeEntry.html" rel="nofollow">jQuery plugin from Keith Wood</a>. Unlike some, this degrades to a text box (that you can still type in, whilst still performing validation), and can also be used with a mouse if you're so inclined.

blocks|key|1643317|text|我找不到一个能完成我想要的功能的插件(例如，多列自动完成与时间输入屏蔽相结合)，所以我编写了MenuOptions|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1643318|这看起来像什么|1643319|📷|atomic|1643320|​|1643321|entityMap|0|LINK|mutability|MUTABLE|url|http://www.menuoptions.org/examples/ReloadMenuOptions.html|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/5a6d161dc16d16c5688150dee909e3f1.gif|imageAlt^0|1A|B|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|I|3|J|5|6|7|17|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|T|O|U|C|$V|W|X|-4]]]]

I couldn't find a plugin that did what I wanted (i.e., multi-column autocomplete combined with input masking for time), so I wrote <a href="http://www.menuoptions.org/examples/ReloadMenuOptions.html" rel="nofollow noreferrer">MenuOptions</a>

What it looks like
<a href="https://i.stack.imgur.com/JDXqs.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JDXqs.gif" alt="enter image description here"></a>

blocks|key|1642926|text|Any%2BTime™+DatePicker/TimePicker+AJAX+Calendar+Widget允许选择时间，当使用鼠标时，它的速度与手工打字一样快，但具有防止错误的额外好处。时间可以以任何必要的方式进行格式化。它还支持键盘操作，尽管无可否认，键盘访问没有鼠标或键入那么快……但同样，它保证值将采用所需的格式。它也很容易定制，也可以处理日期。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1642927|entityMap|0|LINK|mutability|MUTABLE|url|http://www.ama3.com/anytime/^0|0|1G|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

The <a href="http://www.ama3.com/anytime/" rel="nofollow noreferrer">Any+Time™ DatePicker/TimePicker AJAX Calendar Widget</a> allows time selection which, when using the mouse, is about as fast as typing by hand, but has the added benefit of error prevention. The time can be formatted any way necessary. It also supports keyboard manipulation, although admittedly the keyboard access is not as quick as the mouse or typing... but again, it guarantees the value will be in the required format. It's also easy-to-customize and can handle dates as well.

I'm looking to fill a text input with a time that the user can choose in 15 minute intervals. I know there are a few plugins out there. I was wondering if there was any “industry standard” plugin, or strong objective reasons to prefer a particular one in common scenarios.

jQuery time picker

jQuery

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

问jQuery时间选择器
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery时间选择器EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery时间选择器
EN