jQuery TimePicker is a plugin to help users easily input time entries. It works by allowing the user to type times in a free format or selecting them from a dropdown menu.
The plugin will automatically convert all time entries to a format that can be changed passing the timeFormat option; the default value is hh:mm p which will give something like ’02:16 PM’. The following are a few examples of the supported “formats”:
- 1234 will be converted to 12:34 AM
- 1234 p will be converted to 12:34 PM
- 456 will be converted to 04:56 AM
- 1656 will be converted to 04:56 PM
- 1:1 P will be converted to 01:10 PM
- 1:9 A will be converted to 01:09 AM
- 8:59 will be converted to 08:59 PM
- 1:20:30 will be converted to 01:20:30 PM
- 46 will be converted to 05:00 AM (4 hours plus 60 minutes)
There are other supported formats, all inspired by the behavior of a similar timepicker used in Google Calendar.
To learn how to use the plugin and more, visit the official page.
Comments
jQuery TimePicker with 24 hour time format: http://jsbin.com/odoli4/4
Thanks for making things simple.
Perfect! Just what the doctor ordered 🙂
Version 1.0.3 was released http://bit.ly/timepicker-1-0-3.
Now you can make the items in the time entries menu start at
options.startTimeinstead of using the selected time to rearrange the time entries.In this example the first item in the menu is ’12:00 AM’ no matter what time is selected in the input field. http://jsbin.com/onejo3
Can you give an example of minTime adn maxTime, can’t seem to get the syntax right.
Hello Bob, thanks for posting. minTime and maxTime take Date objects, the plugin use them to get the minHour and minMinutes, and maxHour and maxMinutes values.
Here is an example: http://jsbin.com/ebife3/2
Let me know if that helps.
Can someone provide me an example of setting the starTime option on create?Thanks!
Take a look at the code in this fiddle: http://jsfiddle.net/wvega/Gczvz/
Thanks, just what I was looking for
It is better to make iteration over the array by for (var k = 0, len = patterns.length; k <len; k + +) {… }. Because if we expanded Array.prototype, then we'll get an error during the iteration using the for (k in patterns) {… }
Also, I'v replaced the lines widget.ui.css ($. extend (i.element.offset (), { width: i.element.innerWidth (), zIndex: i.options.zindex? i.options.zindex: i.element.offsetParent (). css ('z-index') })); on widget.ui.css ($. extend (i.element.offset (), { width: i.element.outerWidth () – (widget.ui.outerWidth () – widget.ui.width ()), zIndex: i.options.zindex? i.options.zindex: i.element.offsetParent (). css ('z-index') }));
oops, looks like some problems with javascript code posting
Hello @3131929b0c192c2fa8b6439c3440d040:disqus thank you for taking the time to review the code. I’ll take a look at your ideas later today.
I’ll check if there is a way to make DISQUS understands code snippets.
I added
codeHTML tags to your comment to make the code looks a bit better.Hello Hakamishi, I’ve commited your changes to the GitHub repo. Thanks for sharing.
https://github.com/wvega/timepicker/commit/f4ac1f69e660d7f2f1d31c8926ad02f549946233
Hi there I would like to pass the selected time to the next timepicker as the start time.
if (typeof jQuery != ‘undefined’) { (function($){ $(‘#timepicker’).timepicker({ timeFormat: ‘HH:mm’, minHour: null, minMinutes: null, minTime: null, maxHour: 24, maxMinutes: null, maxTime: null, startHour: 0, startMinutes: 0, startTime: null, interval: 15, // callbacks change: function(time) {} }); $(‘#timepicker2’).timepicker({ timeFormat: ‘HH:mm’, minHour: null, minMinutes: null, minTime: null, maxHour: 24, maxMinutes: null, maxTime: null, startHour: 0, // previous selected HH startMinutes: 0, // previous selected mm startTime: null, interval: 15, // callbacks change: function(time) {} }); })(jQuery);}
hope to hear some solutions…thx
Hi Tchitchu,
Thanks for posting. I have a solution for you, please take a look at: http://jsfiddle.net/wvega/A9cE6/. You would need to use the source code from the latest commit to have access to some of the methods described in the example.
Let me know if that works for you.
is there a way to have it specify the end time? For example, I don’t want any time after 6pm. I’ve adjusted the minTime, maxHour, maxTime, etc. and nothing worked. also, there’s no documentation on what those variables are for, and there’s no example of what would go there, other than null. startHour has 7, so I figured maxHour could be a number as well, but it didn’t change the output. thanks.
Hello dev,
Thanks for posting. You’re right, the plugin needs more documentation. I’ve created several demos to answer the questions left by other users in this blog post, but they are not easy to find. I’m currently working on a page dedicated to the plugin and it will hopefully help new users to understand how to use it.
I have created another demo which I think does what you need: http://jsfiddle.net/wvega/qSCzu/. The end time can be controled using the maxHour, maxMinutes and maxTime options. The first two should be integers in the range [0,23] and [0,59], respectively. maxTime takes a Date object and extracts the time information (hour, minutes, seconds) from it. In the future maxTime will also accept a string, like the one you can type in the input field.
Hope this helps.
Very good plugin indeed.. Well done.. I liked it…
http://jquerybyexample.blogspot.com
don’t forget the dropdown:false option – just what I wanted – some client side parsing of a typed time with no gui overhead – brilliant!
Hey Will.
I was using your plugin and was unable to capture the “change” event from timepickers. I checked your code and it seems it its not triggering the correct event, in line 521 I can see:i.element.trigger(‘time-change’, [time]);
I changed it to:i.element.trigger(‘change’, [time]);
and now it triggers accordingly.
Is it ok or am I spoiling your code?
Thanks a lot.
Hernan Silva, Ex Wethink
PD: Hope you understand my poorly written english.
Hi Hernan,
Long time no see you :P.
The plugin captures the change event, parses the time into a Date object and then triggers a time-change event with that Date as argument. However, the plugin shouldn’t prevent the change event from being captured elsewhere, what you describe may be a bug. I’ll take a look.
Please note that the change event is only triggered when the users interact directly with the input field and the field loses focus (i.e. the user types the time). Selecting an entry from the dropdown may not trigger the event. I’ll also check this to be sure.
Also, I would like to keep the time-change event and use it to pass an already parsed time. It is also triggered when the time is changed through setTime, for example.
Finally, I’m worried that using your line, may create an infinite loop, ecause I capture that change event to parse the newly entered or selected date. However, if that change worked for you, then there is no problem. I’ll see if I can do something similar in the plugin.
huhuhuhu