jQuery.ptTimeSelect Widget

ABOUT

jQuery.ptTimeSelect v0.8.0

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

Licensed under the same terms as jQuery:

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:

jquery.ptTimeSelect.css
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>

_BUILD_INCLUDE_DOCUMENTATION_