1#@!#!123s

32767 1#@!#!123s
: / home / rakcha / www / assets / timepicker /
Filename : timePicker.js
back
/**

 * FILE: jQuery.ptTileSelect.js

 *  

 * @fileOverview

 * jQuery plugin for displaying a popup that allows a user

 * to define a time and set that time back to a form's input

 * field.

 *  

 * @version 0.8

 * @author  Paul Tavares, www.purtuga.com

 * @see     http://pttimeselect.sourceforge.net

 * 

 * @requires jQuery {@link http://www.jquery.com}

 * 

 * 

 * LICENSE:

 * 

 *  Copyright (c) 2007 Paul T. (purtuga.com)

 *  Dual licensed under the:

 *

 *  -   MIT

 *      <http://www.opensource.org/licenses/mit-license.php>

 * 

 *  -   GPL

 *      <http://www.opensource.org/licenses/gpl-license.php>

 *  

 *  User can pick whichever one applies best for their project

 *  and doesn not have to contact me.

 * 

 * 

 * INSTALLATION:

 * 

 * There are two files (.css and .js) delivered with this plugin and

 * that must be included in your html page after the jquery.js library

 * and the jQuery UI style sheet (the jQuery UI javascript library is

 * not necessary).

 * Both of these are to be included inside of the 'head' element of

 * the document. Example below demonstrates this along side the jQuery

 * libraries.

 * 

 * |    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

 * |    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/redmond/jquery-ui.css" />

 * |

 * |    <link rel="stylesheet" type="text/css" href="jquery.ptTimeSelect.css" />

 * |    <script type="text/javascript" src="jquery.ptTimeSelect.js"></script>

 * |

 * 

 * USAGE:

 * 

 *     -    See <$(ele).ptTimeSelect()>

 * 

 * 

 * 

 * LAST UPDATED:

 * 

 *         - $Date: 2012/08/05 19:40:21 $

 *         - $Author: paulinho4u $

 *         - $Revision: 1.8 $

 * 

 */



(function($){

    

    /**

     *  jQuery definition

     *

     *  @see    http://jquery.com/

     *  @name   jQuery

     *  @class  jQuery Library

     */

    

    /**

     * jQuery 'fn' definition to anchor all public plugin methods.

     * 

     * @see         http://jquery.com/

     * @name        fn

     * @class       jQuery Library public method anchor

     * @memberOf    jQuery

     */

    

    /**

     *  Namespace for all properties and methods

     *  

     *  @namespace   ptTimeSelect

     *  @memberOf    jQuery

     */

    jQuery.ptTimeSelect         = {};

    jQuery.ptTimeSelect.version = "__BUILD_VERSION_NUMBER__";

    

    /**

     * The default options for all calls to ptTimeSelect. Can be

     * overwriten with each individual call to {@link jQuery.fn.ptTimeSelect}

     *  

     * @type {Object} options

     * @memberOf jQuery.ptTimeSelect

     * @see jQuery.fn.ptTimeSelect

     */

    jQuery.ptTimeSelect.options = {

        containerClass: undefined,

        containerWidth: '22em',

        hoursLabel:     'Hour',

        minutesLabel:   'Minutes',

        setButtonLabel: 'Set',

        popupImage:     undefined,

        onFocusDisplay: true,

        zIndex:         10,

        onBeforeShow:   undefined,

        onClose:        undefined

    };

    

    /**

     * Internal method. Called when page is initialized to add the time

     * selection area to the DOM.

     *  

     * @private

     * @memberOf jQuery.ptTimeSelect

     * @return {undefined}

     */

    jQuery.ptTimeSelect._ptTimeSelectInit = function () {

        jQuery(document).ready(

            function () {

                //if the html is not yet created in the document, then do it now

                if (!jQuery('#ptTimeSelectCntr').length) {

                    jQuery("body").append(

                            '<div id="ptTimeSelectCntr" class="">'

                        +    '        <div class="ui-widget ui-widget-content ui-corner-all">'

                        +    '        <div class="ui-widget-header ui-corner-all">'

                        +    '            <div id="ptTimeSelectCloseCntr" style="float: right;">'

                        +    '                <a href="javascript: void(0);" onclick="jQuery.ptTimeSelect.closeCntr();" '

                        +    '                        onmouseover="jQuery(this).removeClass(\'ui-state-default\').addClass(\'ui-state-hover\');" '

                        +    '                        onmouseout="jQuery(this).removeClass(\'ui-state-hover\').addClass(\'ui-state-default\');"'

                        +    '                        class="ui-corner-all ui-state-default">'

                        +    '                    <span class="ui-icon ui-icon-circle-close">X</span>'

                        +    '                </a>'

                        +    '            </div>'

                        +    '            <div id="ptTimeSelectUserTime" style="float: left;">'

                        +    '                <span id="ptTimeSelectUserSelHr">1</span> : '

                        +    '                <span id="ptTimeSelectUserSelMin">00</span> '

                        +    '                <span id="ptTimeSelectUserSelAmPm">AM</span>'

                        +    '            </div>'

                        +    '            <br style="clear: both;" /><div></div>'

                        +    '        </div>'

                        +    '        <div class="ui-widget-content ui-corner-all">'

                        +    '            <div>'

                        +    '                <div class="ptTimeSelectTimeLabelsCntr">'

                        +    '                    <div class="ptTimeSelectLeftPane" style="width: 50%; text-align: center; float: left;" class="">Hour</div>'

                        +    '                    <div class="ptTimeSelectRightPane" style="width: 50%; text-align: center; float: left;">Minutes</div>'

                        +    '                </div>'

                        +    '                <div>'

                        +    '                    <div style="float: left; width: 50%;">'

                        +    '                        <div class="ui-widget-content ptTimeSelectLeftPane">'

                        +    '                            <div class="ptTimeSelectHrAmPmCntr">'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);" '

                        +    '                                        style="display: block; width: 45%; float: left;">AM</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);" '

                        +    '                                        style="display: block; width: 45%; float: left;">PM</a>'

                        +    '                                <br style="clear: left;" /><div></div>'

                        +    '                            </div>'

                        +    '                            <div class="ptTimeSelectHrCntr">'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">1</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">2</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">3</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">4</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">5</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">6</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">7</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">8</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">9</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">10</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">11</a>'

                        +    '                                <a class="ptTimeSelectHr ui-state-default" href="javascript: void(0);">12</a>'

                        +    '                                <br style="clear: left;" /><div></div>'

                        +    '                            </div>'

                        +    '                        </div>'

                        +    '                    </div>'

                        +    '                    <div style="width: 50%; float: left;">'

                        +    '                        <div class="ui-widget-content ptTimeSelectRightPane">'

                        +    '                            <div class="ptTimeSelectMinCntr">'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">00</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">05</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">10</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">15</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">20</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">25</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">30</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">35</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">40</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">45</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">50</a>'

                        +    '                                <a class="ptTimeSelectMin ui-state-default" href="javascript: void(0);">55</a>'

                        +    '                                <br style="clear: left;" /><div></div>'

                        +    '                            </div>'

                        +    '                        </div>'

                        +    '                    </div>'

                        +    '                </div>'

                        +    '            </div>'

                        +    '            <div style="clear: left;"></div>'

                        +    '        </div>'

                        +    '        <div id="ptTimeSelectSetButton">'

                        +    '            <a href="javascript: void(0);" onclick="jQuery.ptTimeSelect.setTime()"'

                        +    '                    onmouseover="jQuery(this).removeClass(\'ui-state-default\').addClass(\'ui-state-hover\');" '

                        +    '                        onmouseout="jQuery(this).removeClass(\'ui-state-hover\').addClass(\'ui-state-default\');"'

                        +    '                        class="ui-corner-all ui-state-default">'

                        +    '                SET'

                        +    '            </a>'

                        +    '            <br style="clear: both;" /><div></div>'

                        +    '        </div>'

                        +    '        <!--[if lte IE 6.5]>'

                        +    '            <iframe style="display:block; position:absolute;top: 0;left:0;z-index:-1;'

                        +    '                filter:Alpha(Opacity=\'0\');width:3000px;height:3000px"></iframe>'

                        +    '        <![endif]-->'

                        +    '    </div></div>'

                    );

                    

                    var e = jQuery('#ptTimeSelectCntr');

    

                    // Add the events to the functions

                    e.find('.ptTimeSelectMin')

                        .bind("click", function(){

                            jQuery.ptTimeSelect.setMin($(this).text());

                         });

                    

                    e.find('.ptTimeSelectHr')

                        .bind("click", function(){

                            jQuery.ptTimeSelect.setHr($(this).text());

                         });

                    

                    $(document).mousedown(jQuery.ptTimeSelect._doCheckMouseClick);            

                }//end if

            }

        );

    }();// jQuery.ptTimeSelectInit()

    

    

    /**

     * Sets the hour selected by the user on the popup.

     * 

     * @private 

     * @param  {Integer}   h   -   Interger indicating the hour. This value

     *                      is the same as the text value displayed on the

     *                      popup under the hour. This value can also be the

     *                      words AM or PM.

     * @return {undefined}

     * 

     */

    jQuery.ptTimeSelect.setHr = function(h) {

        if (    h.toLowerCase() == "am"

            ||  h.toLowerCase() == "pm"

        ) {

            jQuery('#ptTimeSelectUserSelAmPm').empty().append(h);

        } else {

            jQuery('#ptTimeSelectUserSelHr').empty().append(h);

        }

    };// END setHr() function

        

    /**

     * Sets the minutes selected by the user on the popup.

     * 

     * @private

     * @param {Integer}    m   - interger indicating the minutes. This

     *          value is the same as the text value displayed on the popup

     *          under the minutes.

     * @return {undefined}

     */

    jQuery.ptTimeSelect.setMin = function(m) {

        jQuery('#ptTimeSelectUserSelMin').empty().append(m);

    };// END setMin() function

        

    /**

     * Takes the time defined by the user and sets it to the input

     * element that the popup is currently opened for.

     * 

     * @private

     * @return {undefined}

     */

    jQuery.ptTimeSelect.setTime = function() {

        var tSel = jQuery('#ptTimeSelectUserSelHr').text()

                    + ":"

                    + jQuery('#ptTimeSelectUserSelMin').text()

                    + " "

                    + jQuery('#ptTimeSelectUserSelAmPm').text();



        var i = jQuery(".isPtTimeSelectActive");



        if(i.attr('type') == 'time'){

            i.val(jQuery.ptTimeSelect.convertFromAMPM(tSel));

        }else{

            i.val(tSel);

        }



        i.trigger('change');



        this.closeCntr();

        

    };// END setTime() function



    /**

     * Converts a 24 hours formated time into a 12 hours formated time

     *

     *

     * @private

     * @return {undefined}

     */

    jQuery.ptTimeSelect.convertFrom24 = function(time) {

            // Check correct time format and split into components

            time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

            if (time.length > 1) { // If time format correct

                time = time.slice (1);  // Remove full string match value

                time[5] = +time[0] < 12 ? ' AM' : ' PM'; // Set AM/PM

                time[0] = +time[0] % 12 || 12; // Adjust hours

            }

            return time.join (''); // return adjusted time or original string

    };// END convertFrom24() function



    /**

     * Converts a 12 hours formated time into a 24 hours formated time

     *

     *

     * @private

     * @return {undefined}

     */

    jQuery.ptTimeSelect.convertFromAMPM = function(time){



        var hours = Number(time.match(/^(\d+)/)[1]);

        var minutes = Number(time.match(/:(\d+)/)[1]);

        var AMPM = time.match(/\s(.*)$/)[1];

        if(AMPM == "PM" && hours<12) hours = hours+12;

        if(AMPM == "AM" && hours==12) hours = hours-12;

        var sHours = hours.toString();

        var sMinutes = minutes.toString();

        if(hours<10) sHours = "0" + sHours;

        if(minutes<10) sMinutes = "0" + sMinutes;

        return sHours + ":" + sMinutes;

    };// END convertFromAMPM() function



    /**

     * Displays the time definition area on the page, right below

     * the input field.  Also sets the custom colors/css on the

     * displayed area to what ever the input element options were

     * set with.

     * 

     * @private

     * @param {String} uId - Id of the element for whom the area will

     *                  be displayed. This ID was created when the 

     *                  ptTimeSelect() method was called.

     * @return {undefined}

     * 

     */

    jQuery.ptTimeSelect.openCntr = function (ele) {

        jQuery.ptTimeSelect.closeCntr();

        jQuery(".isPtTimeSelectActive").removeClass("isPtTimeSelectActive");

        var cntr            = jQuery("#ptTimeSelectCntr");

        var i               = jQuery(ele).eq(0).addClass("isPtTimeSelectActive");

        var opt             = i.data("ptTimeSelectOptions");

        var style           = i.offset();

        var time            = '';

        style['z-index']    = opt.zIndex;

        style.top           = (style.top + i.outerHeight());

        if (opt.containerWidth) {

            style.width = opt.containerWidth;

        }

        if (opt.containerClass) {

            cntr.addClass(opt.containerClass);

        }

        cntr.css(style);



        if(i.attr('type') == 'time'){

            time = jQuery.ptTimeSelect.convertFrom24(i.val());

        }else{

            time = i.val();

        }



        var hr    = 1;

        var min   = '00';

        var tm    = 'AM';

        if (time) {

            var re = /([0-9]{1,2}).*:.*([0-9]{2}).*(PM|AM)/i;

            var match = re.exec(time);

            if (match) {

                hr    = match[1] || 1;

                min    = match[2] || '00';

                tm    = match[3] || 'AM';

            }

        }

        cntr.find("#ptTimeSelectUserSelHr").empty().append(hr);

        cntr.find("#ptTimeSelectUserSelMin").empty().append(min);

        cntr.find("#ptTimeSelectUserSelAmPm").empty().append(tm);

        cntr.find(".ptTimeSelectTimeLabelsCntr .ptTimeSelectLeftPane")

            .empty().append(opt.hoursLabel);

        cntr.find(".ptTimeSelectTimeLabelsCntr .ptTimeSelectRightPane")

            .empty().append(opt.minutesLabel);

        cntr.find("#ptTimeSelectSetButton a").empty().append(opt.setButtonLabel);

        if (opt.onBeforeShow) {

            opt.onBeforeShow(i, cntr);

        }

        cntr.slideDown("fast");

            

    };// END openCntr()

        

    /**

     * Closes (hides it) the popup container.

     * @private

     * @param {Object} i    -   Optional. The input field for which the

     *                          container is being closed.

     * @return {undefined}

     */

    jQuery.ptTimeSelect.closeCntr = function(i) {

        var e = $("#ptTimeSelectCntr");

        if (e.is(":visible") == true) {

            

            // If IE, then check to make sure it is realy visible

            if (jQuery.support.tbody == false) {

                if (!(e[0].offsetWidth > 0) && !(e[0].offsetHeight > 0) ) {

                    return;

                }

            }

            

            jQuery('#ptTimeSelectCntr')

                .css("display", "none")

                .removeClass()

                .css("width", "");

            if (!i) {

                i = $(".isPtTimeSelectActive");

            }

            if (i) {

                var opt = i.removeClass("isPtTimeSelectActive")

                            .data("ptTimeSelectOptions");

                if (opt && opt.onClose) {

                    opt.onClose(i);

                }

            }

        }

        return;

    };//end closeCntr()

    

    /**

     * Closes the timePicker popup if user is not longer focused on the

     * input field or the timepicker

     * 

     * @private

     * @param {jQueryEvent} ev -    Event passed in by jQuery

     * @return {undefined}

     */

    jQuery.ptTimeSelect._doCheckMouseClick = function(ev){

        if (!$("#ptTimeSelectCntr:visible").length) {

            return;

        }

        if (   !jQuery(ev.target).closest("#ptTimeSelectCntr").length

            && jQuery(ev.target).not("input.isPtTimeSelectActive").length ){

            jQuery.ptTimeSelect.closeCntr();

        }

        

    };// jQuery.ptTimeSelect._doCheckMouseClick

    

    /**

     * FUNCTION: $().ptTimeSelect()

     * Attaches a ptTimeSelect widget to each matched element. Matched

     * elements must be input fields that accept a values (input field).

     * Each element, when focused upon, will display a time selection 

     * popoup where the user can define a time.

     * 

     * @memberOf jQuery

     * 

     * PARAMS:

     * 

     * @param {Object}      [opt] - An object with the options for the time selection widget.

     * 

     * @param {String}      [opt.containerClass=""] - A class to be associated with the popup widget.

     * 

     * @param {String}      [opt.containerWidth=""] - Css width for the container.

     * 

     * @param {String}      [opt.hoursLabel="Hours"] - Label for the Hours.

     * 

     * @param {String}      [opt.minutesLabel="Minutes"] - Label for the Mintues container.

     * 

     * @param {String}      [opt.setButtonLabel="Set"] - Label for the Set button.

     * 

     * @param {String}      [opt.popupImage=""] - The html element (ex. img or text) to be appended next to each

     *      input field and that will display the time select widget upon

     *      click.

     * 

     * @param {Integer}     [opt.zIndex=10] - Integer for the popup widget z-index.

     * 

     * @param {Function}    [opt.onBeforeShow=undefined] - Function to be called before the widget is made visible to the 

     *      user. Function is passed 2 arguments: 1) the input field as a 

     *      jquery object and 2) the popup widget as a jquery object.

     * 

     * @param {Function}    [opt.onClose=undefined] - Function to be called after closing the popup widget. Function

     *      is passed 1 argument: the input field as a jquery object.

     * 

     * @param {Bollean}     [opt.onFocusDisplay=true] - True or False indicating if popup is auto displayed upon focus

     *      of the input field.

     * 

     * 

     * RETURN:

     * @return {jQuery} selection

     * 

     * 

     * 

     * EXAMPLE:

     * @example

     *  $('#fooTime').ptTimeSelect();

     * 

     */

    jQuery.fn.ptTimeSelect = function (opt) {

        return this.each(function(){

            if(this.nodeName.toLowerCase() != 'input') return;

            var e = jQuery(this);

            if (e.hasClass('hasPtTimeSelect')){

                return this;

            }

            var thisOpt = {};

            thisOpt = $.extend(thisOpt, jQuery.ptTimeSelect.options, opt);

            e.addClass('hasPtTimeSelect').data("ptTimeSelectOptions", thisOpt);

            

            //Wrap the input field in a <div> element with

            // a unique id for later referencing.

            if (thisOpt.popupImage || !thisOpt.onFocusDisplay) {

                var img = jQuery('<span>&nbsp;</span><a href="javascript:" onclick="' +

                        'jQuery.ptTimeSelect.openCntr(jQuery(this).data(\'ptTimeSelectEle\'));">' +

                        thisOpt.popupImage + '</a>'

                    )

                    .data("ptTimeSelectEle", e);

                e.after(img);

            }

            if (thisOpt.onFocusDisplay){

                e.focus(function(){

                    jQuery.ptTimeSelect.openCntr(this);

                });

            }

            return this;

        });

    };// End of jQuery.fn.ptTimeSelect

    

})(jQuery);