A jQuery Plugin

Download

jQuery.ptTimeSelect

Latest Version: 0.8.0

Required

www.jquery.com (v1.3.2 or higher)

Support

Via the Help Forum at SourceForge. Click here to post your question/problem.

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>

Demo

Example 1

Default call with no params defined. [view source] $('#sample1 input').ptTimeSelect();
Start:
End:



Example 2

Call with customized SET button label. [view source] $('#sample2 input').ptTimeSelect({ popupImage: 'Select Time' });
Start Time:
 Select Time
End Time:
 Select Time

Example 3

Call with customized class by the name of timeCntr. The class was defined using the jQuery UI ThemeRoller. [view source] $('#sample3 input').ptTimeSelect({ containerClass: "timeCntr", containerWidth: "350px", setButtonLabel: "Select", minutesLabel: "min", hoursLabel: "Hrs" });
Start:
End:

Example 2

Call with defined events. [view source] $('#sample4 input').ptTimeSelect({ onBeforeShow: function(i){ $('#sample4 #sample4-data').append('onBeforeShow(event) Input field: ' + $(i).attr('name') + "
"); }, onClose: function(i) { $('#sample4 #sample4-data').append('onClose(event)Time selected:' + $(i).val() + "
"); } });
Start Time:

Event Data

ptTimeSelect is a jQuery plugin that provides a UI for a user to define and set a time on a user form. It requires jQuery (obviously) as well as the dimmention.js plugin (available from jQuery as well).

1 : 00 AM

Hour
Minutes
AM PM
1 2 3 4 5 6 7 8 9 10 11 12