Skip to content

Updating timepickr

Updated for jQuery UI 1.8.5 10/30/2010

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:

Examples


$('.timepickr-example:eq(0)').timepickr();

<input class="timepickr-example" />

$('.timepickr-example:eq(1)').timepickr({
  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" />

$('.timepickr-example:eq(2)').timepickr({
  trigger: 'nothing',
  handle: $('#clock')
});

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

$('.timepickr-example:eq(3)').timepickr({
  select: function(){
    alert('Time is '+this.value);
  }
});

<input class="timepickr-example" />

Options

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'

{ 77 } Comments

  1. pprkut | July 19, 2009 at 9:38 am | Permalink

    Awesome. I just found timepickr a few days ago but this improvement is really impressive.
    I tried it and as it is a lot smaller than the original one, I could also much easier add a few changes.
    I think they are interesting for others as well, so I’ll post them here:
    – if you add “left: this.element.position().left” after “zIndex: 1000″ in “show”, the elements are displayed correctly under the element also at first time. Some browser would initially display it at the very left border.
    – in Arora (webkit based browser) all buttons are displayed below each other. To fix this one as to add a width-setting to “.ui-timepickr ol”. I used width:500px, which worked fine in my tests.

    Thanks again for this and I hope you like my few suggestions!

  2. Danny | July 20, 2009 at 11:37 am | Permalink

    @pprkut:
    Thanks for your suggestions. I haven’t had the CSS problems you mention, but I’m only testing in the big four (IE, FF, Safari, Chrome). It’s nice to see people looking at this in other browsers!
    –Danny

  3. michael | July 23, 2009 at 5:21 pm | Permalink

    Thanks for this; exactly what I needed.

  4. michael | July 23, 2009 at 5:24 pm | Permalink

    Found one issue for this plugin. I’m using this with an asp:textbox (as I do with the datepicker), but it doesn’t fire the onchange event in such a way that it causes a partial postback as the datepicker enhanced control does (I’m using this inside an UpdatePanel with AJAX Toolkit). Any idea what might be causing the difference in behavior?

  5. Danny | July 23, 2009 at 6:52 pm | Permalink

    I’ve never used ASP widgets so I really can’t tell what’s going on, but textboxes do not trigger the onchange event until they lose focus. the timepickr may not be doing that the way you expect. It should trigger the custom event “timepickrselect” on the textbox, though.

  6. Nathan | July 26, 2009 at 4:11 pm | Permalink

    Thanks for doing this, much smaller and much easier to tweak to my needs. I did have to make both changes pprkut suggested above, but in my case I used “left: this.element.position().left + this.options.left” in the show method so that it would show up at the correct offset position the first time.

    Michael – Though I don’t know for sure what the issue is, check and see if the datepicker is manually calling blur() on the textbox where timepickr isn’t.

  7. Erica | August 11, 2009 at 2:59 pm | Permalink

    If the timepickr is inside a table tag with more than one column, the numbers wrap around (how much they wrap around depends on the width/number of columns). Do you have a suggestion as to how to let the column overlap the proceeding columns so that this doesn’t happen?

    I thank you for the code and your time.

    R/

  8. Danny | August 14, 2009 at 4:09 pm | Permalink

    @Erica:
    I use timepickr in a table at bililite.com/bililite (bottom left table), without any wrap around problems. Can you post a link to your page?
    Wrap-around happens when the window isn’t wide enough to accomodate the numbers; I want that effect so the user doesn’t need to scroll. If you want to change it, try adding width: 9999px to the '.ui-timepickr {position:absolute; text-align: left; } ' line. You may have to play with the width (and make it in em’s rather than px) to avoid a huge scrollbar.
    –Danny

  9. Mario | August 24, 2009 at 1:05 pm | Permalink

    Hello,

    I’m trying to use timepickr inside a jquery ui dialog. However, I’m heving a couple of issues:

    First, the number boxes wrap around to the width of the dialog. If I set width: 9999px as described in the comment above, they don’t wrap anymore but the ones that don’t fit the dialog, get hidden instead of showing over the dialog edge.

    Any help will be appreciated

  10. Danny | August 27, 2009 at 11:00 am | Permalink

    @Mario:
    You probably need to set the dialog to have overflow: visible to make sure it all shows. I think the jQuery UI show/hide effects set overflow to hidden, so you may have to reset it after the dialog is shown. I’ve never played with the dialog widget, so I’m not sure.
    –Danny

  11. Jonathan | September 24, 2009 at 1:52 am | Permalink

    Hi Guys,

    I’m having some problems with this control. After getting the original version to work, I simply replaced this new jquery-timepickr.js over the old one and firebug doesn’t like it. It says “$.widget is not a function”. Anybody else getting this?

  12. Danny | September 25, 2009 at 3:33 am | Permalink

    @Jonathan:
    $.widget is part of jQuery UI. You have to include it for this version to work. You could just copy the $.widget code and not include the whole thing.
    –Danny

  13. Denis | December 9, 2009 at 6:16 am | Permalink

    Hello,

    thanks to Maxime and you for providing such a nice plugin. But could you precise, for newbies as me, exactly what files (js scripts, css files) we should download, where we should place them and a complete example?

    Thanks in advance.

  14. Danny | December 12, 2009 at 11:19 pm | Permalink

    @Denis:
    You need to include the jQuery UI code (see jqueryui.com. The easiest way to do that is to include the following in your <head> section:

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" <>/script>

    and copy the timepickr (from http://bililite.com/inc/jquery.timepickr.js to your server and include it. No additional CSS is needed. For complete examples, see this page or http://bililite.com/bililite
    –Danny

  15. Brian | February 13, 2010 at 12:44 pm | Permalink

    Greetings,

    none of the examples are working for me.

    they are upside down (hours, minutes, then am/pm) and do not update the field properly

  16. Danny | February 13, 2010 at 9:32 pm | Permalink

    @Brian:
    Hmm. The order is correct (hours, minutes, then AM/PM is what I want), but it’s not working for me either. I’ll try to take a look at it.
    –Danny

  17. Danny | February 14, 2010 at 12:17 am | Permalink

    @Brian:
    Solved.
    Thanks for picking this up (as a matter of practical advice, there’s nothing better for solving a mysterious bug than a few minutes on the treadmill. Thinking about anything is better than staring at the walls).
    Seems that jQuery 1.4 improved the add method to sort the elements: $(selector1).add(selector2) used to return [selector1, selector2] but now the two items are in the order they appear in the DOM.
    I was doing something like $('.hour.hover', menu).add('.hour',menu).eq(0).text() to get the hovered-over item, and if nothing was being hovered-over, then the first item in the list. I changed it to elem = $('.hour.hover', menu)[0] || $('.hover', menu)[0]; $(elem).text() and it now works.
    –Danny

  18. Brian | February 14, 2010 at 12:31 am | Permalink

    @Danny

    Looks good thanks

    I swim

    I am trying to change the configuration, something like:

    12 hour

    24 hour

    I have tried many combinations: reset, destroy, … once the timepickr is initialized, I cannot change the configuration without a page reload

  19. Danny | February 14, 2010 at 12:58 am | Permalink

    @Brian:
    $(...).timepickr('destroy').timepickr({convention: 12});
    Basically, destroy the old time picker and create a new one.
    Let me know if it doesn’t work.
    –Danny

  20. Brian | February 14, 2010 at 1:13 am | Permalink

    @Danny

    I have tried MANY variations :(

    please look at my example which seems too simple to fail

  21. Danny | February 14, 2010 at 1:31 am | Permalink

    @Brian:
    I should hire you for bug testing! (Salary starts at $0 an hour and doubles weekly).
    It was a dumb copy/paste error that left two versions of the destroy method, the last of which was wrong. All should be working now.
    –Danny

  22. Brian | February 14, 2010 at 1:45 am | Permalink

    @Danny

    yes, exactly thanks

    good spotting

  23. Brian | February 17, 2010 at 12:57 am | Permalink

    @Danny

    timepickr seems to be eating the change event. $(aField).change works fine when I also attach timepickr $(aField).timepickt(…) the change event does not trigger

    Brian

  24. Brian | February 18, 2010 at 1:17 pm | Permalink

    @Danny

    I added an explicit trigger change to the hide function – seems to be working

    great widget!!!
    Brian

  25. Arash | March 15, 2010 at 5:55 pm | Permalink

    Is it me, or are the defaults not respected? I did something like this:

    $(‘.timepicker’).timepickr({convention: 12, rangeMin: ['00', '15', '30', '45', '59'], suffix: ['AM', 'PM'] });

    And I noticed that the select was not being respected, after I added that in, the line of code that deals with formats was throwing errors. Everything works if I explicitly specify the defaults for everything.

    Also, I noticed that the menu’s don’t follow the mouse as was the previous design. I am assuming this was removed intentionally?

    Thanks!

  26. Arash | March 15, 2010 at 6:05 pm | Permalink

    With respect to the above comment, I noticed that another one of the plugins I am using is not respecting defaults either. My guess is that this is related to jquery 1.4.2 (just upgrades), but I have to dig a bit deeper.

  27. Danny | March 16, 2010 at 1:24 am | Permalink

    @Arash:
    I see what you mean by the menu not following the mouse. I wonder what’s going on. I use the most recent jQuery and jQuery UI from google, so if they upgrade, then something might break without me realizing it. I’ll look into it when I get the chance.
    –Danny

  28. Danny | March 16, 2010 at 1:35 am | Permalink

    @Arash:
    Now I see it; it’s the same bug as the one I fixed in this comment; jQuery 1.4 changed the way it implements add. Since this bug was just visual, it didn’t “bug” me and I didn’t notice it. It has been corrected.
    –Danny

  29. Arash | March 16, 2010 at 1:04 pm | Permalink

    Thanks for the quick fix Danny. Do you have any idea why the defaults are not applied as I mentioned previously?

    I was worried that maybe it was a result of some of my code, so I created a simple test case by downloading jquery 1.4.2 and jquery-ui 1.8.3, and I get the same result.

    You can see it here: http://test.lambandtunafish.com/timepickr/test.html
    If you look at the source, the commented out portion of code works fine, but the one without all the options specified does not.

    I still haven’t gotten a chance to debug, but if I get some free time, I will look into it.

    Thanks.

  30. Danny | March 17, 2010 at 9:03 am | Permalink

    @Arash:
    I don’t get anything when I click on the input box in your test page. Setting the options works on my demo page; I’m not sure what’s going on in your code. Can you rub it with Firebug on to see if there are any obvious errors?
    –Danny

  31. Arash | March 17, 2010 at 6:42 pm | Permalink

    @Danny

    Thats the problem, if you look at the source, I specify the timepickr with only a few options, and it doesn’t work, but if I specify with all of the options, everything works.

    To be more clear, the script looks as such:

    /*
    $(‘.timepicker’).timepickr({convention: 12,
    top: 6,
    left: 0,
    animSpeed: 3,
    format: ‘{h}:{m} {suffix}’,
    handle: false,
    prefix: ['00-11', '12-23'],
    resetOnBlur: true,
    val: false,
    hoverIntent: false,
    trigger: ‘click’, rangeMin: ['00', '15', '30', '45', '59'], suffix: ['AM', 'PM']
    });
    */

    $(‘.timepicker’).timepickr({convention: 12, rangeMin: ['00', '15', '30', '45', '59'], suffix: ['AM', 'PM'] });

    Note: The commented out portion (when uncommented) works fine, however, the current uncommented portion fails to load the timepickr.

    I created this base case so that I was sure no other javascript was messing with it. You can download the full sample here: http://test.lambandtunafish.com/timepickr/timepickr.zip

  32. Danny | March 18, 2010 at 9:33 am | Permalink

    @Arash:
    I’m getting an “illegal character” error in IE, and an “Error in parsing value for ‘left'” error in Firefox. Try using the uncompressed jQuery and jQuery UI and see if you still get the error, and if so, where it is.
    –Danny

  33. Arash | March 18, 2010 at 8:05 pm | Permalink

    @Danny

    Firefox wasn’t throwing errors for me, but I was able to generate the error in IE8. After walking through the stack, it comes back to the fact that the default options are not applied. in this case, it was trying to access ‘this.options.top’ which I did not set when creating the timepickr, and as a result it threw an error.

    If you put a breakpoint at line 28 of jquery.timepickr.js, you will see that not none of the default options are applied.

    Everything that I have read indicates that the defaults are being set correctly by specifying them as: ‘$.ui.timepickr.defaults’, so this could be a bug with the latest jquery ui.

  34. Danny | March 18, 2010 at 11:28 pm | Permalink

    @Arash:
    Aha! That’s the problem: jQuery UI changed the way it names defaults in 1.8. I’m using the release version as served by Google Ajax Apis, which is 1.7.2. When 1.8 is official, I’ll have to go back and redo all my plugins, but for now, I’m leaving them as they are. I don’t know why they had to change things.
    If you go back to 1.7.2, I think everything should work.
    –Danny

  35. Arash | March 19, 2010 at 12:54 am | Permalink

    @Danny

    yup…that was it, the following change was needed in the timepickr.js:

    $.ui.timepickr.defaults -> $.ui.timepickr.prototype.options

  36. Danny | March 25, 2010 at 2:30 pm | Permalink

    @Arash:
    The change has been made. Thanks for following this so closely!
    –Danny

  37. Stephen | March 26, 2010 at 4:28 pm | Permalink

    Thanks for the simple, but useful widget.

    Like post #7, I also see a problem with the numbers wrapping if timepickr is inside a table. This only happens in IE (firefox + chrome are OK).
    Example here: http://www.srlee.com/tptest.html

  38. Danny | March 27, 2010 at 8:03 pm | Permalink

    @Stephen:
    Life is finite. IE formatting issues with tables are infinite. If you can find a good solutions (I suspect the right CSS magic would do the trick), I would be grateful, but I can’t fix it now.
    –Danny

  39. Mike | April 5, 2010 at 10:15 am | Permalink

    Hey, thanx for updating timepickr to jq.ui 1.8! It’s really great!
    But i had problems displaying it when the width of parent container was limited: instead of beautiful row of hours i got a phone keypad, 3×4 =)
    So i made a little improvement, which made it work as i desired.
    in _init() insert menu not to this.element, but to body:
    var menu = this.menu = ui._buildMenu().insertAfter($(document.body));

    in _show() use this.element.offset() to determine absolute position:
    this.menu.css({
    top: this.element.position().top + this.element.height() + this.options.top + this.element.offset().top,
    left: this.element.offset().left,
    zIndex: 1000
    });

    and in _redraw do the same:
    this.menu.css({
    top: this.element.position().top + this.element.height() + this.options.top + this.element.offset().top,
    left: this.options.left + this.element.offset().left
    });

    Hope this helps someone!

  40. Jakob | April 6, 2010 at 2:16 pm | Permalink

    Minor bug:
    With this setting:
    convention: 24,
    trigger: ‘focus’,
    rangeMin: ['00','05','10','15','20','25','30','35','40','45','50','55']

    I get an extra space after: 01:00 <– Extra space.
    Problem can be solved with:
    format: '{h}:{m}',

  41. Danny | April 6, 2010 at 10:46 pm | Permalink

    @Mike:
    Are you using Internet Explorer? That’s the browser that gives problems for some fixed-width parents. I’ll take a look at your code; it would be nice to have a fix.
    –Danny

  42. Danny | April 7, 2010 at 10:42 am | Permalink

    @Jakob:
    You are right; I’m not sure if I would call it a bug, since it is the expected behavior (default format is ‘{h}:{m} {suffix}’) and yes, your answer is the correct one: set the format to what you want. Most 24-hour times are written as format: '{h}{m}' without the colon.
    –Danny

  43. Alticast | April 26, 2010 at 5:06 pm | Permalink

    Hi!
    Good job! Cool modification of JQuery plugin.
    What is the minimal custom UI config to have it working? It works fine with full UI bundle and does not work with Core only. May be it is possible to have just couple of components selected?
    Thanks!

  44. Danny | April 27, 2010 at 10:55 am | Permalink

    @Alticast:
    I don’t know what the minimal UI would be; I load the full jQuery UI in my page. I would have thought that all it needs is the widget code (in jquery.ui.widget.js) though I haven’t tested it.
    –Danny

  45. Thomas | May 21, 2010 at 6:41 am | Permalink

    Danny, thanks for updating this plugin. But I can’t get it to work. I’m using jquery 1.3.2 with ui 1.7.2 on firefox. Here is what I have:

    $(‘input:last’).timepickr({hoverIntent: true})

    In Firebug this gives me: “object is undefined”, in jquery-1.3.2.js on line 672

    Any ideas?

  46. Thomas | May 21, 2010 at 6:44 am | Permalink

    Regarding my previous post. Of course html was stripped, here is what I include in the head section (in that order):

    jquery-1.3.2.js
    jquery-ui-1.7.3.custom.min.js
    jquery.timepickr.js
    jquery.hoverIntent.js

  47. Danny | May 27, 2010 at 7:02 pm | Permalink

    @Thomas:
    I’ve updated the code to use jQuery 1.4 and jQuery UI 1.8; you may want to update as well.
    –Danny

  48. Peter Nguyen | July 4, 2010 at 9:15 am | Permalink

    Thanks for a wonderful job with this plugin!

    I have encountered a problem though, when checking the examples on this page, I’ve noticed that the CSS class “ui-state-hover” doesn’t get removed when you move the mouse outside the element. But when using the same code on my site, the “ui-state-hover” disappears, making the plugin select the value of the first . Do you have any idea how to fix this?

  49. Danny | July 13, 2010 at 8:32 pm | Permalink

    @Peter Nguyen:
    I’m not sure. The code only removes the ui-state-hover when hovering over a different element (and applies it to that element immediately), not when moving off the timepickr entirely. Are you manipulating ui-state-hover in any other way?
    –Danny

  50. zev | July 30, 2010 at 2:28 pm | Permalink

    I am trying to use the ‘val’ parameter and passing it a legitimate value (05:30 pm). This is being parsed in the init function but the first time the timepickr is displayed it does not reflect this time.

    Subsequent times do reflect whatever time was selected but I assume this is because the ui-state-hover class was set with the hover and not removed. I have not been able to figure out where in the code this class is meant to set on init.

    Any ideas?

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

    @Zev:
    the code in _init is
    if (this.options.val) {
    element.val(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!
    –Danny

  52. 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.

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

    @Sukima:
    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.
    –Danny

  54. 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!??

    Thankyou

    jquery-ui-1.8.4.custom.css
    jquery-1.4.2.js
    jquery.ui.widget.js
    jquery-ui-1.8.4.custom.js
    jquery.timepickr.js

  55. 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!!

  56. 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

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

    Does not work with 1.8.5

  58. 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?

    –Danny

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

    @Vincenzo:
    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,
    Danny

  60. 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:

    From:

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

    to:

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

    ui.hide(); //Add this line
    });
    }

    Hope this helps to anyone who may need it.

    Regards.

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

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

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

    Update the timepickr once again – http://github.com/hasokeric/jquery-timepickr/blob/master/jquery.timepickr.js

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

    @Haso:
    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?
    –Danny

  64. 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 :)

  65. 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.
    –Danny

  66. 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?

    Thanks,
    Shane

  67. 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:

    $(function(){
    $(‘#timestart’).timepickr({
    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.

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

    @Lucas:
    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.
    –Danny

  69. 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:

    [html]
    [head]
    [link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" /]

    [script src=”http://code.jquery.com/jquery-1.4.2.min.js”[/script]
    [script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js”[/script]
    [script src=”http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.widget.js”[/script]

    [script src="http://bililite.nfshost.com/jquery.timepickr.js" /]
    [/head]

    [body]
    [input class="timepickr-example"/]

    [script type="text/javascript"]
    $(‘.timepickr-example:eq(1)’).timepickr({
    convention: 24,
    format: ‘{h}:{m}’,
    hoverIntent: false
    });
    [/script]
    [/body]
    [/html]

  70. 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:

      <html>
      <head>
      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" />
      
      <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script>
      
      <script src="http://bililite.nfshost.com/inc/jquery.timepickr.js"></script>
      </head>
      
      <body>
      <input class="timepickr-example"/>
      
      <script type="text/javascript">
      $('.timepickr-example:eq(0)').timepickr({
      convention: 24,
      format: '{h}:{m}',
      hoverIntent: false
      });
      </script>
      </body>
      </html>
  71. 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?

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

    @John Doe:
    use resetOnBlur: false
    Danny

  73. 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!

  74. 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…
    https://github.com/bradgreens/jquery-timepickr

  75. 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.

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

    @pbzrpa:
    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.
    –Danny

  77. 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

    [...] http://bililite.com/blog/2009/07/09/updating-timepickr/ [...]

Post a Comment

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

Notify me of followup comments via e-mail. You can also subscribe without commenting.