A jQuery timepicker plugin
Demo | Download | Configuration | History | Contact
Click on the clock -- "other field" example, with callback
To try different configuration options, set the options below, then click again on field or clock.
Also you will of course need the jQuery library, if you don't already have it:
After including the jQuery script in your html <head> block, include the jquery.clockpick.js file like so:
Then in your $(document).ready block, simply add the following bit of code:
This assumes you are binding the plugin to an element with the id "clockpick". You can certainly bind the plugin to any element that makes sense for your use.
ClockPick takes two optional parameters:
Click target different
If you want to have the action on a different element than the time field, you would configure as below (like the "click on clock" demo).
Assuming the field you wish to have filled with the time, has the name 'myfieldname':
Version 1.2.9, released January 9, 2011
- jQuery 1.4.4+ does not support getting css positional properties for hidden elements. Fixed bug related to that jQuery change.
Version 1.2.8, released September 25, 2010
- fixed bugs: some variables were not scoped properly, leading to interference with other scripts
Version 1.2.7, released June 28, 2009
- fixed bug: "console.log" removed from code
Version 1.2.6, released June 6, 2009
- fixed bug: when using external click target (clock image), text input was not manually editable.
Version 1.2.5, released February 14, 2009
- Removed Safari hacks; newer versions of Safari (3.1+) are behaving more like FF and IE
- removed [@name] reference, changed to [name]; @attr selectors obsolete in jQuery 1.3+
Version 1.2.4, released July 15, 2008
- Fixed "event: focus" bug with div placement
- changed css styling
Version 1.2.3, released April 19, 2008
- Fixed small bug by adding display:none to containers in style sheet
- New styling
- Added support for variable opacity
Version 1.2.2, released February 20, 2008
Fixed bug where plugin would fail on IE6 if Doctype was not declared.
Version 1.2.1, released November 20, 2007
Fixed small issue with div placed incorrectly when control near bottom of viewport and scrolltop > 0.
Version 1.2, released November 19, 2007
Added native support for the bgIframe plugin.
Version 1.1, released September 25, 2007
|+||Added keyboard support.|
|+||Safari for Mac issues seem to be fixed. Please let me know if you experience any problems using Safari.|
|+||Fixed odd Firefox error referenced in Version 1.0. This is a known FF bug that has been around for a long time when using event.relatedTarget and the mouseout relatedTarget is an input field. Used a try/catch block as a workaround. More info: https://bugzilla.mozilla.org/show_bug.cgi?id=208427|
Version 1.0, released July 12 2007.
|+||Div rectifier not tested on field near right/left edge of viewport.|
|+||Safari for Mac: time div appears well below input field in "same field" example. Working on a workaround, as clientY does not appear to return the proper result in Safari when clicking on an input field.|
|+||Odd Firefox Error: "uncaught exception: Permission denied to
get property HTMLDivElement.nodeName" on mouseout from
minutes div onto input field
ContactQuestions, comments, suggestions: hit me up: joshnathanson at gmail dot com