jQuery UI time selecting widget

View the Project on GitHub dwachss/flexcal

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