Your Ad Here


The NoGray JavaScript Time Picker:

This file contains a few examples to help you start using the time picker, for the latest version please visit The NoGray.com

we thrive on your donations

Requirements:
The color picker requires an XHTML doctype, which means your <html> tag should look like 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Create It:

To create a time picker, you'll need to call the time picker class with three elements and a set of options. Example: HTML: 
<input type="text" name="time2" id="time2" /> <a href="#" id="time2_toggler">Open time picker</a>
<div id="time2_picker" class="time_picker_div"></div>
later
...
Script:
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});


Try It:

Standard time picker (12 hours format):
Open time picker


24 hour format:
Open time picker


Stand alone (no input field and always visible):
Selected Time


Configurations:

You can customized the look and feel of the color picker by changing the images or creating new images using the PhotoShop files included in the resource directory. Also, there are some configuration options you can set when initiating the time picker by passing an options object.

Options objects are a key: value object with the following syntax 
{option: value,
option: {option: value,
		option: value},
option: [value1, value2]}
Option Description Default Value
visible Indicates either the time picker would be visible or not. false
Example: 
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {visible:true});
offset The timepicker by default will show at the lower left corner of the input field. offset allows for offsetting the time picker position. {x:0, y:0}
Example: 
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', { visible:true, offset:{x:50, y:25} });
startTime The initial time (as an object) for the time picker (hour between 0 to 23, minute between 0 to 59) current time
Example: 
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', { startTime:{hour:10, minute:10} });
selectedTime The initial seelcted time (as an object) for the time picker (hour between 0 to 23, minute between 0 to 59) null
Example: 
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', { selectedTime:{hour:5, minute:17} });
format24 Use a 24 hours format if true false
Example: 
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {format24:true});
imagesPath The path to the images folder that hold the time picker images (without a trailing slash). "time_picker_files/images"
Example: 
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', {imagesPath:"my_time_picker_files/images"});
faceImage The clock face image. "clock_face.gif"
hourHandImage The hour hand image (one image for 12 hours using CSS spirits). "clock_hours.gif"
minuteHandImage The minute hand image (one image for 60 minutes using CSS spirits). "clock_minutes.gif"
centerImage The center image for the clock (the hands nob). "clock_center.gif"
closeImage The close image "close_image.gif"
clockSize Because there could be a delay in loading the images, the clockSize is the image faceImage size. {width:142, height:142}
Example: 
var tp = new TimePicker('time2_picker', 'time2', 'time2_toggler', { clockSize:{width:50, height:50} });
hourHandSize The width and height of the hourHangImage to show one hour (the total width divided by 12). Give or take 1 pixel. {width:67, height:68}
minuteHandSize The width and height of the minuteHangImage to show one minute (the total width divided by 60). Give or take 1 pixel. {width:111, height:112}
centerSize The width and height of the centerImage. {width:7, height:6}
ampmStyles The CSS style object for the AM/PM link. {'fontSize':'10pt',
'fontWeight':'bold',
'color':'#999999',
'textDecoration':'none'}
lang The language variables for AM/PM. Also used for user input. {'am':'AM', 'pm':'PM'}
closeOpenTimePickers Close all the open time pickers when the current time picker is open. true
onOpen Event that will be fired when the time picker is opened. empty
onClose Event that will be fired when the time picker is closed. empty
onChange Event that will be fired when the time is changed. empty
Example: 
var tp = new TimePicker('time_picker', null, null, {onChange:function(){
                                                                      if (this.time.hour < 12) var ampm = this.options.lang.am;
                                                                      else var ampm = this.options.lang.pm;

                                                                      var hour = this.time.hour%12;
                                                                      if (hour < 10) hour = "0"+hour;
                                                                      var minute = this.time.minute;
                                                                      if (minute < 10) minute = "0"+minute;
                                                                      $('time3_value').setHTML(hour+":"+minute+" "+ampm);
                                                                 } });


Your Ad Here