ClockPick – A JQuery plugin that enables you to add a time picker.
After including the jQuery script in your html 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"></link>

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. 

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:

Then set the configuration variable when you call ClockPick:

$(".clockpick").clockpick({
useBgiframe : true
}); 

Demo: http://www.jnathanson.com/index.cfm?page=jquery/clockpick/ClockPick#demo

Download: http://www.jnathanson.com/pages/jquery/clockpick/1.2.5/jquery.clockpick.1.2.5.js

Source: http://www.jnathanson.com/index.cfm?page=jquery/clockpick/ClockPick

Related Listings:

1. TimePicker Script with jQuery Plugin A time picker for jQuery. list version | table version....
2. jScroller jQuery Plugin This Autoscroller is Crossbrowser compatible and also w3c compatible, because...
3. Google Analytics – jQuery Plugin This plugin is intended to simplify the process of adding...
4. Jquery Plugin – Feedback Feedback is a jQuery plugin that lets you send Feedback...
5. Text Highlight – jQuery Plugin Text higlighting is part of DynaCloud – where tags/keywords are...

Do you like this post?

Email: