# 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.

- Holding Element: the element that will hold the time picker parts.
- Input Field: the input field that will take the time picker value. Can be null if no input field is required, just use the onChange event to populate any data.
- Toggler: the element that will toggle the time picker on and off (if not visible). Can be null if no toggler is required, just use the openTimePicker and closeTimePicker functions to open and close the time picker.
- 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);
                                                                     } });