Timepickr

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="http://bililite.com/images/silk/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'