# ABOUT

jQuery.ptTimeSelect v0.8

jQuery.ptTimeSelect is a jQuery plugin for usage on input fields that displays a popup widget allowing a user to define a time, which is written back to an input field.

## AUTHOR

Paul Tavares, http://www.purtuga.com

http://pttimeselect.sourceforge.net

## LICENSE

Copyright (c) 2007-2012 Paul T. http://www.purtuga.com

Licensed under the same terms as jQuery:

- 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 does not have to contact me.

# CHANGE LOG

## Version 0.8

- 3554560 Documentation needs to be clearer and not as complex (https://sourceforge.net/tracker/?func=detail&aid=3554560&group_id=190063&atid=931834)
- 3549413 does not support use of jQuery.noConflict() (https://sourceforge.net/tracker/?func=detail&aid=3554560&group_id=190063&atid=931834)
- Simplified packaging - only contains minimal set of file (reduce confusion)
- Move to Markdown documenation.
- Updates to website

# INSTALL

jQuery.ptTimeSelect includes the following 2 files that must be deployed on the webserver and included in the display page:

1. jquery.ptTimeSelect.css
2. jquery.ptTimeSelect.js

Both of these files are included in the zip file under the src folder.

## PREREQUISITES

jQuery.ptTimeSelect plugin has the following prerequisites:

- jQuery http://www.jquery.com
- jQuery UI Style Sheet (css). No need for full javacript library http://www.jqueryui.com

jQuery.ptTimeSelect plugin should be included in the head section of the html page, after the entries for jQuery and jQuery UI Style sheet as follows:

    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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>

    </head>

# USAGE

jQuery.ptTimeSelect is called agaist input fields to attach a Time Select widget to each matched element. Each element, when focused upon, will display a time selection popoup where the user can define a time.

## EXAMPLE

    <input name="time" value="" />
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[name="time"]').ptTimeSelect();
        });
    </script>

## INPUT PARAMETERS

The plugin accepts only one input parameter; a javascript object with the list of options. All options are optional. See below for a list of supported options

    $('input[name="time"]').ptTimeSelect({
        hoursLabel: 'HRS'
    });

## OPTIONS

- containerClass - A class to be associated with the popup widget. Default is undefined
- containerWidth - Css width for the container. Default is "20em".
- hoursLabel - Label for the Hours. Default is "Hours"
- minutesLabel - Label for the Mintues container. Default is "Minutes"
- setButtonLabel - Label for the Set button. Deafult is "Set"
- 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. Default is blank ""
- zIndex - Integer for the popup widget z-index. Default is 10
- onBeforeShow - 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. Default is undefined
- onClose - Function to be called after closing the popup widget. Function is passed 1 argument: the input field as a jquery object. Default is undefined
- onFocusDisplay - True or False indicating if popup is auto displayed upon focus of the input field. Default is true

### Example

    $('input[name="time"]')
        .ptTimeSelect({
            containerClass: undefined,
            containerWidth: undefined,
            hoursLabel:     'Hour',
            minutesLabel:   'Minutes',
            setButtonLabel: 'Set',
            popupImage:     undefined,
            onFocusDisplay: true,
            zIndex:         10,
            onBeforeShow:   undefined,
            onClose:        undefined
        });

## RETURNS

Function will return a jQuery object with the input selection, thus maintaining jQuery's chainable nature.

    <input name="time" value="" style="display:none;" />
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[name="time"]')
                .ptTimeSelect({
                    zIndex: 100,
                    onBeforeShow: function(input, widget){
                        // do something before the widget is made visible.
                    }
                })
                .show();
        });
    </script>