什么是好的 Javascript 时间选择器?

什么是 jquery 或独立 js 的好时间选择器?我希望像谷歌使用的东西在他们的日历,它有一个下拉的共同时间在15分钟的间隔或让你手动输入一个时间,它验证它。

162116 次浏览

You could read jQuery creator John Resig's post about it here: http://ejohn.org/blog/picking-time/.

I wasn't happy with any of the suggested time pickers, so I created my own with inspiration from Perifer's and the HTML5 spec:

http://github.com/gregersrygg/jquery.timeInput

You can either use the new html5 attributes for time input (step, min, max), or use an options object:

<input type="time" name="myTime" class="time-mm-hh" min="9:00" max="18:00" step="1800" />
<input type="time" name="myTime2" class="time-mm-hh" />


<script type="text/javascript">
$("input[name='myTime']").timeInput(); // use default or html5 attributes
$("input[name='myTime2']").timeInput({min: "6:00", max: "15:00", step: 900}); // 15 min intervals from 6:00 am to 3:00 pm
</script>

Validates input like this:

  • Insert ":" if missing
  • Not valid time? Replace with blank
  • Not a valid time according to step? Round up/down to closest step

The HTML5 spec doesn't allow am/pm or localized time syntax, so it only allowes the format hh:mm. Seconds is allowed according to spec, but I have not implemented it yet.

It's very "alpha", so there might be some bugs. Feel free to send me patches/pull requests. Have manually tested in IE 6&8, FF, Chrome and Opera (Latest stable on Linux for the latter ones).

This is the best I've found till the date http://trentrichardson.com/examples/timepicker/

In case someone is interested in another JavaScript TimPicker, I developed and maintain a jQuery plugin that does the job. It works something like EZ Time JS (although I didn't knew about it until 5 minutes ago :D), allowing users to enter time in almost any way they feel comfortable with, and converting the input into a common format.

Checkout the jQuery TimePicker Options page to see it in action.