«
»

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:

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'

This entry was posted by Danny on July 9, 2009 at 7:07 pm under jQuery. You can leave a response, or trackback from your own site. Follow any responses to this entry through the RSS 2.0 feed.

78 Comments

  1. Danny says:

    @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

    August 6, 2010, 12:08 pm

  2. Sukima says:

    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.

    September 1, 2010, 8:56 am

  3. Danny says:

    @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

    September 2, 2010, 10:42 pm

  4. Bette says:

    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

    September 3, 2010, 3:55 am

  5. Lauri Lubi says:

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

    September 7, 2010, 3:46 am

  6. Vincenzo says:

    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

    September 15, 2010, 5:59 am

  7. Haso Keric says:

    Does not work with 1.8.5

    September 18, 2010, 4:47 am

  8. Danny says:

    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

    September 22, 2010, 8:58 am

  9. Danny says:

    @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

    September 22, 2010, 9:40 am

  10. Lucas G. says:

    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.

    October 19, 2010, 7:54 am

  11. Danny says:

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

    October 21, 2010, 9:49 am

  13. Danny says:

    @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

    October 25, 2010, 9:29 pm

  14. Haso Keric says:

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

    October 29, 2010, 9:08 am

  15. Danny says:

    @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

    October 30, 2010, 9:29 pm

  16. Shane Tomlinson says:

    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

    November 5, 2010, 5:33 am

  17. Lucas says:

    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.

    June 28, 2011, 5:31 am

  18. Danny says:

    @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

    July 1, 2011, 6:03 am

  19. John Doe says:

    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]

    February 20, 2012, 10:02 am

  20. Danny says:

    @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>
    February 20, 2012, 12:25 pm

  21. John Doe says:

    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?

    February 21, 2012, 8:56 am

  22. Danny says:

    @John Doe:
    use resetOnBlur: false
    Danny

    February 21, 2012, 9:34 am

  23. Chaobin Tang says:

    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!

    February 4, 2013, 12:58 am

  24. Brad Greenwald says:

    I made a build that is compatible with jQuery UI 1.10.0 if
    anyone needs it…
    https://github.com/bradgreens/jquery-timepickr

    February 12, 2013, 12:18 pm

  26. pbzrpa says:

    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.

    March 31, 2014, 9:32 am

  27. Danny says:

    @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

    March 31, 2014, 11:29 am

  28. Andrea says:

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

    October 1, 2014, 4:17 pm

Leave a Reply


Warning: Undefined variable $user_ID in /home/public/blog/wp-content/themes/evanescence/comments.php on line 75