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);

USING BGIFRAME FOR IE6


Enter time:  


Code:
$("#clockpick2").clockpick(
{ valuefield: 'timefield2',
useBgiframe: true },
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 --
useBgiframe
(must include bgIframe plugin) 		boolean False --
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.7.js (18K)
Download jquery.clockpick.1.2.7.pack.js (10K)
Download jquery.clockpick.1.2.7.min.js (12K)
Download clockpick.1.2.7.css (1K)
Download jquery.clockpick.1.2.7.zip (Zip archive of above four files) (8K)

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

If you are using ClockPick near a select menu, you will want to
use the bgIframe plugin to combat the IE6 select menu show-through issue
Download bgIframe plugin (zip archive)

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'
});

Using bgIframe plugin

To account for the notorious IE6 select menu show-through issue, a popular jQuery plugin called bgIframe is frequently used. ClockPick offers support for this plugin by setting a configuration variable useBgiframe = true. By doing this, ClockPick calls the bgiFrame plugin at the right time so its divs are shown above any select menus that might be nearby.

First you will need to include the bgIframe plugin, somewhere afer your include of the jQuery library:
<script src="/path/to/bgiframeplugin.js" type="text/javascript"></script>

Then set the configuration variable when you call ClockPick:
$(".clockpick").clockpick({
useBgiframe : true
});



History

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

 

 

More script and css style: www.htmldrive.net