Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A timepicker plugin for jQuery
JavaScript CSS
Branch: master


Click here to view a ClockPick demo



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>

Include the clockpick css file:
<link rel="stylesheet" href="path/to/clockpick.css" type="text/css">

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.

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


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 the name 'myfieldname':

valuefield : 'myfieldname'

Something went wrong with that request. Please try again.