ClockPick

A jQuery timepicker plugin

Demo | Download | Configuration | History | Contact

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: 'timefield1' },
cback);

To try different configuration options, set the options below, then click again on field or clock.

  Param Type Default Try it!
Argument 1 "options" (object) starthour int 8
endhour int 18
showminutes boolean True
minutedivisions int 4
military boolean False
event string 'Click'
layout string 'vertical'
valuefield string Null --
hoursopacity float 1
minutesopacity float 1
Argument 2
"callback" (function)

function
(gets passed back time value as string)
Null --


Download

Download jquery.clockpick.1.2.9.js (18K)
Download jquery.clockpick.1.2.9.min.js (12K)
Download clockpick.1.2.9.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>

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:

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

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

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

$(".clockpick").clockpick({
valuefield : 'myfieldname'
});



History

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.

Known issues:

+ 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
 

 

Contact

Questions, comments, suggestions: hit me up: joshnathanson at gmail dot com