ClockPick

A jQuery timepicker plugin

Demo | Download | Configuration | History

Demo


Enter time:  
Click on the field - "same field" example
Code:
$("#clockpick1").clockpick();

Enter time:  

Click on the clock -- "other field" example, with callback
Code:
$("#clockpick2").clockpick(
{ valuefield: 'timefield' },
cback);


To try different configuration options, set the options to the right, then click again on field or clock above.
  Param Type Default Try it!
Argument 1 "options" starthour int 8
endhour int 18
showminutes boolean True
minutedivisions int 4
military boolean False
event string 'click'
layout string 'vertical'
valuefield string Null --
Argument 2
"callback" 		callback function Null --


Download

Download jquery.clockpick.js (11K)
Download jquery.clockpick.packed.js (4K)
Download clockpick.css (1K)

Also you will of course need the jQuery library, if you don't already have it:
http://jquery.com

Configuration

Basic

After including the jQuery script in your html <head> block, include the jquery.clockpick.js file like so:
<script src="path/to/jquery.clockpick.js"></script>

Then in your $(document).ready block, simply add the following bit of code:

$("#clockpick").clockpick();

This assumes you are binding the plugin to an element with the id called "clockpick". You can certainly bind the plugin to any element that makes sense for your use.

Adding parameters

ClockPick takes two optional parameters:
options (hash) - an object containing settings keys and their values
callback (function) - a callback function to run after ClockPick is run

Example:

$("#clockpick").clockpick({
starthour : 6,
endhour : 15,
showminutes : false
}, mycallback
);

Click target different
than value field

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 an id of "myfieldid":

$(".clockpick").clockpick({
valuefield : $("#myfieldid")
});

History

Version 1.0, released July 9 2007.