Skip to content

Updating timepickr

This page is obsolete. Please see my github page.

I like Maxime Haineault's timepickr. But I found it was written for jQuery 1.2, and didn't trigger events correctly with the current jQuery. It also had more dependencies than I wanted, to the extent that the minified version is 49k large, and had some CSS quirks in Internet Explorer that I couldn't figure out without dissecting the whole thing. So I dissected it and rebuilt it smaller, updated for jQuery 1.3. I didn't put back a lot of the options that I didn't need, so it's not exactly an improvement. But it works for me.

Download the code.

I also added the ability to use hoverIntent so you can roll the mouse over the intervening buttons without triggering them:



<input class="timepickr-example" />

  convention: 24,
  format: '{h}{m} hours',
  hoverIntent: true,
  rangeMin:    ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']

<input class="timepickr-example" />

  trigger: 'nothing',
  handle: $('#clock')

<input class="timepickr-example" /> <img id="clock" src="/images/clock.PNG" />

  select: function(){
    alert('Time is '+this.value);

<input class="timepickr-example" />


top {Number}
Pixel offset of the top left button. Default: 6.
left {Number}
Pixel offset of the top left button. Default: 0.
animSpeed {Number|slow|normal|fast}
Speed to animate showing/hiding the buttons. Default: 0.
trigger {String}
Event to trigger showing the buttons. Default: 'click'.
convention {12|24}
Whether to use a 12-hour or 24-hour clock. Default: 12.
format {String}
String that determines how to display the time. Uses simple formatting: '{h}' is replaced by the hour; '{m}' is replaced by the minutes; '{suffix}' is replaced by the suffix (used in the 12-hour clock); '{prefix}' is replaced by the prefix (used in the 24-hour clock). Default: '{h}:{m} {suffix}'
handle {false|String|jQuery object}
Other element that will trigger showing the buttons when clicked. If handle is not false, then $(handle).click() shows the buttons. Default: false.
prefix {Array(String)}
Strings to use as labels for the 24-hour clock. Displaying all 24 hours is too long to be usable, so we split them into two halves. Default: ['00-11', '12-23'].
suffix {Array(String)}
Strings to use as AM/PM labels for the 12-hour clock. Default: ['am', 'pm'].
rangeMin {Array(String)}
Values to use for the minutes list. Default: ['00', '15', '30', '45']. Use strings rather than numbers to make sure they are formatted correctly (12:00, not 12:0).
resetOnBlur {Boolean}
True to reset the element to its original value if nothing is clicked; false to keep the value generated by the mouseover even if not clicked. Default: true.
val {false|String}
If not false, value to assign to the element when the buttons are shown. Default: false.
hoverIntent {Boolean}
True to use the hoverIntent plugin if available. Note that timepickr does not provide any way to adjust the hoverIntent paramenters. Default: false.
select {undefined|function}
Callback function, called when the time buttons are clicked. Also available as an event 'timepickrselect'

{ 27 } Comments

  1. Danny | August 6, 2010 at 12:08 pm | Permalink

    the code in _init is
    if (this.options.val) {

    so it should just set the value of the text box; it does not affect the display of the timepickr itself. Doing that is much more complicated; it would involve parsing the value and figuring out which buttons to hilight. This plugin, while acting sophisticated, is far more simple. Sorry about that, but if you’ve got the time, feel free to implement this improvement!

  2. Sukima | September 1, 2010 at 8:56 am | Permalink

    You sir are the bestest ever. I wanted this plugin so much for my project but it was not compatible with any jQuery I had in stalled. Thank you. You are a project saver err… you know what I mean.

    Are you planning to push this back to the main timepickr project or continue this as a fork? Has it been saved off into a public repo like github or google code something like that? If not should it be? I’d be happy to facilitate that if needed (github).

    Thanks again.

  3. Danny | September 2, 2010 at 10:42 pm | Permalink

    Thanks for the postive feedback. I don’t have plans to put this on a public repository; I have minimal experience with that. It’s under an MIT open-source license, so feel free to set up a github repository. Please let me know if you do.

  4. Bette | September 3, 2010 at 3:55 am | Permalink

    thanks for this plugin, your the best..
    the older version works with jquery-ui-1.7.3 fine but this one dosent work for me.
    I have a prob. this version dosn’t work with jquery-ui-1.8.4.. i dont t know why!? i have loaded the folowing scripts and stylsheets.. i’m using the datepicker too but in 2 diffenet input fields.
    can anyone help me
    which scripts and css do i have to load!??



  5. Lauri Lubi | September 7, 2010 at 3:46 am | Permalink

    Wonderful! I really liked the inferface of timepickr, but could not get it working for jQuery 1.4/I 1.8. Your rewrite just did the work!!

  6. Vincenzo | September 15, 2010 at 5:59 am | Permalink

    Hello Danny!
    First of all, great job. This plugin is wonderful. thanks a lot for the refactoring.

    I have a couple of questions for you.
    #1 – I have just included the js file and everything is working perfectly except the fact that when I click on one of the hour/minute boxes they dont disappear. What am I missing?
    #2 – Is there a way to restrict the range of selectable hours? let’s say for example from 9:00 to 19:00.

    Thanks Again

  7. Haso Keric | September 18, 2010 at 4:47 am | Permalink

    Does not work with 1.8.5

  8. Danny | September 22, 2010 at 8:58 am | Permalink

    For all those who can’t get it to work with jQuery UI 1.8.5, I’m not sure what the problem might be. It seems to be working for me, using the most recent version that google is serving, which is 1.8.5.

    Does anyone have any more details?


  9. Danny | September 22, 2010 at 9:40 am | Permalink

    There’s no way to limit the range of hours as the plugin is currently written, but you could modify it: change the _getRanges12 or _getRanges24 functions to just the hours you want, then change the lines

    			var dayHours   = hrs.find('li').slice(0, 12);
    			var nightHours = hrs.find('li').slice(12, 24);

    in _redraw to select the appropriate hours.

    Hope this helps,

  10. Lucas G. | October 19, 2010 at 7:54 am | Permalink

    Hello @Mario / @Danny

    I have found some problems combining this with a jQuery dialog. This little change does the work for me:


    if (this.options.resetOnBlur) {
    menu.find(‘li’).bind(‘mousedown.timepickr’, function() {‘timepickr.initialValue’, element.val());


    if (this.options.resetOnBlur) {
    menu.find(‘li’).bind(‘mousedown.timepickr’, function() {‘timepickr.initialValue’, element.val());

    ui.hide(); //Add this line

    Hope this helps to anyone who may need it.


  11. Danny | October 21, 2010 at 9:49 am | Permalink

    Thanks! I don’t use ui.dialog, but others may find this useful.

  12. Haso Keric | October 25, 2010 at 3:25 pm | Permalink

    Update the timepickr once again –

  13. Danny | October 25, 2010 at 9:29 pm | Permalink

    I assume you updated the code for jQuery UI 1.8.5, though I can’t see any differences just glancing through the code. What changes did you make?

  14. Haso Keric | October 29, 2010 at 9:08 am | Permalink

    It was minor changes the widget failed to destroy itself and cause a js error because apparently in 1.4.3 they changed the way this should be done… But ill keep improving it of course.. i also moved CSS stuff from .js to .css

    keep an eye on it.. and contribute :)

  15. Danny | October 30, 2010 at 9:29 pm | Permalink

    @Haso Keric:
    Ah, got it. They created a real base class called $.Widget, so you had to change $.widget.prototype to $.Widget.prototype.
    I updated my code; thanks!

    I kept the CSS stuff in the .js file so I could keep it all in one file, though your approach is of course the correct one.

  16. Shane Tomlinson | November 5, 2010 at 5:33 am | Permalink

    Hey Danny, great work here getting this updated for the newest jQuery/UI. I have a patch to your redo I’d like to submit back to you, it fixes some problems binding to blur to close the timepicker if trigger is set to something other than “click”, fixes a problem if the field does not have a value when the timepicker is instantiated but has a value when it is first shown, and finally fixes an issue I was seeing with the minutes row being shifted left in 24 hour mode whenever looking at hours 12-23. Could you get back to me with an address I can mail this to?


  17. Lucas | June 28, 2011 at 5:31 am | Permalink

    This time picker functionality seems to be exactly what I need.
    However, it must be because I’m new to jQuery but I cannot get this to work. It’s so frustrating. I was using the old timepickr but I really want to use this one.
    Here is my code:

    trigger: ‘focus’

    Am I referencing the field in the wrong manner? That’s how I call timepickr from the original site and it works. It doesn’t seem to work in this case. I am calling jquery-ui and everything.
    Thanks in advance for any tips and/or advice.

  18. Danny | July 1, 2011 at 6:03 am | Permalink

    That looks right. Can you put up a page with your code and I’ll try to look at it? Try it without the trigger option as well.

  19. John Doe | February 20, 2012 at 10:02 am | Permalink

    I just can’t get this to work. Not after one full hour of twiddling and hacking.
    PLEASE have a ultra minimalistic example somewhere, please please please.

    This doesn’t work and I can not figure out why:

    [link rel=”stylesheet” type=”text/css” href=”” /]

    [script src=””[/script]
    [script src=””[/script]
    [script src=””[/script]

    [script src=”” /]

    [input class=”timepickr-example”/]

    [script type=”text/javascript”]
    convention: 24,
    format: ‘{h}:{m}’,
    hoverIntent: false

  20. Danny | February 20, 2012 at 12:25 pm | Permalink

    @John Doe:
    You’ve got a whole bunch of typos/errors in your code:

    1. script tags are not closed. They have to be <script src="whatever"></script>
    2. Use the most up-to-date versions of the library, jQuery 1.7 and jQuery UI 1.8 (the css doesn't matter so much; I'm still using the 1.7 Smoothness theme)
    3. The :eq() selector starts from zero, so :eq(1) won't select anything
    4. Try the following:

      <link rel="stylesheet" type="text/css" href="" />
      <script src=""></script>
      <script src=""></script>
      <script src=""></script>
      <input class="timepickr-example"/>
      <script type="text/javascript">
      convention: 24,
      format: '{h}:{m}',
      hoverIntent: false
  21. John Doe | February 21, 2012 at 8:56 am | Permalink

    Oh joy, it works now! =^-^=
    Thank you very much. Sorry for the dumb mistakes I made but after some hours I went just code-blind. ;)
    Now is there a way to have the user input the time by keyboard without interfeing with the timepicker?

  22. Danny | February 21, 2012 at 9:34 am | Permalink

    @John Doe:
    use resetOnBlur: false

  23. Chaobin Tang | February 4, 2013 at 12:58 am | Permalink

    Thank you for the good work. Not only did you make it work in higher version os $.ui, also is it smaller and without extra deps.

    Great work!

  24. Brad Greenwald | February 12, 2013 at 12:18 pm | Permalink

    I made a build that is compatible with jQuery UI 1.10.0 if
    anyone needs it…

  25. pbzrpa | March 31, 2014 at 9:32 am | Permalink

    Thank you very much for updating this code, it is a very user friendly time picker. The only issue I have and I am not sure how to fix, is that if the input is on the far right hand side of the view port the picker selection renders off screen and enables the horizontal scroll bar.

  26. Danny | March 31, 2014 at 11:29 am | Permalink

    Yes, the formatting can sometimes be awkward. I’m certainly open to suggestions how to fix that, but it works and I do not have the time to dedicate to fixing it.

  27. Andrea | October 1, 2014 at 4:17 pm | Permalink

    THANK YOU… after spending 3 days trying to get the Maxine version working, I finally found your version and it worked the first time. What can I say? THANK YOU!!!!

{ 1 } Trackback

  1. TextBox – 選擇日期時間 | Eli | June 22, 2013 at 8:12 am | Permalink

    […] […]

Post a Comment

Your email is never published nor shared. Required fields are marked *