2 * jQuery UI Timepicker 0.0.7
4 * Copyright 2010-2011, Francois Gelinas
5 * Dual licensed under the MIT or GPL Version 2 licenses.
6 * http://jquery.org/license
15 * As it is a timepicker, I inspired most of the code from the datepicker
16 * Francois Gelinas - Nov 2010
18 * Release 0.0.2 - Jan 6, 2011
19 * Updated to include common display options for USA users
20 * Stephen Commisso - Jan 2011
22 * release 0.0.3 - Jan 8, 2011
23 * Re-added a display:none on the main div (fix a small empty div visible at the bottom of the page before timepicker is called) (Thanks Gertjan van Roekel)
24 * Fixed a problem where the timepicker was never displayed with jquery ui 1.8.7 css,
25 * the problem was the class ui-helper-hidden-accessible, witch I removed.
26 * Thanks Alexander Fietz and StackOverflow : http://stackoverflow.com/questions/4522274/jquery-timepicker-and-jqueryui-1-8-7-conflict
28 * Release 0.0.4 - jan 10, 2011
29 * changed showLeadingZero to affect only hours, added showMinutesLeadingZero for minutes display
30 * Removed width:100% for tables in css
32 * Release 0.0.5 - Jan 18, 2011
33 * Now updating time picker selected value when manually typing in the text field (thanks Rasmus Schultz)
34 * Fixed : with showPeriod: true and showLeadingZero: true, PM hours did not show leading zeros (thanks Chandler May)
35 * Fixed : with showPeriod: true and showLeadingZero: true, Selecting 12 AM shows as 00 AM in the input field, also parsing 12AM did not work correctly (thanks Rasmus Schultz)
37 * Release 0.0.6 - Jan 19, 2011
38 * Added standard "change" event being triggered on the input when the content changes. (Thanks Rasmus Schultz)
39 * Added support for inline timePicker, attached to div or span
40 * Added altField that receive the parsed time value when selected time changes
41 * Added defaultTime value to use when input field is missing (inline) or input value is empty
42 * if defaultTime is missing, current time is used
44 * Release 0.0.7 - Fev 10, 2011
45 * Added function to set time after initialisation :$('#timepicker').timepicker('setTime',newTime);
46 * Added support for disabled period of time : onHourShow and onMinuteShow (thanks Rene Felgenträger)
49 (function ($, undefined) {
51 $.extend($.ui
, { timepicker
: { version
: "0.0.7"} });
53 var PROP_NAME
= 'timepicker';
54 var tpuuid
= new Date().getTime();
56 /* Time picker manager.
57 Use the singleton instance of this class, $.timepicker, to interact with the time picker.
58 Settings for (groups of) time pickers are maintained in an instance object,
59 allowing multiple different settings on the same page. */
61 function Timepicker() {
62 this.debug
= true; // Change this to true to start debugging
63 this._curInst
= null; // The current instance in use
64 this._isInline
= false; // true if the instance is displayed inline
65 this._disabledInputs
= []; // List of time picker inputs that have been disabled
66 this._timepickerShowing
= false; // True if the popup picker is showing , false if not
67 this._inDialog
= false; // True if showing within a "dialog", false if not
68 this._dialogClass
= 'ui-timepicker-dialog'; // The name of the dialog marker class
69 this._mainDivId
= 'ui-timepicker-div'; // The ID of the main timepicker division
70 this._inlineClass
= 'ui-timepicker-inline'; // The name of the inline marker class
71 this._currentClass
= 'ui-timepicker-current'; // The name of the current hour / minutes marker class
72 this._dayOverClass
= 'ui-timepicker-days-cell-over'; // The name of the day hover marker class
74 this.regional
= []; // Available regional settings, indexed by language code
75 this.regional
[''] = { // Default regional settings
76 hourText
: 'Heure', // Display text for hours section
77 minuteText
: 'Minute', // Display text for minutes link
78 amPmText
: ['AM', 'PM'] // Display text for AM PM
80 this._defaults
= { // Global defaults for all the time picker instances
81 showOn
: 'focus', // 'focus' for popup on focus,
82 // 'button' for trigger button, or 'both' for either (not yet implemented)
83 showAnim
: 'fadeIn', // Name of jQuery animation for popup
84 showOptions
: {}, // Options for enhanced animations
85 appendText
: '', // Display text following the input box, e.g. showing the format
86 onSelect
: null, // Define a callback function when a hour / minutes is selected
87 onClose
: null, // Define a callback function when the timepicker is closed
88 timeSeparator
: ':', // The caracter to use to separate hours and minutes.
89 showPeriod
: false, // Define whether or not to show AM/PM with selected time
90 showLeadingZero
: true, // Define whether or not to show a leading zero for hours < 10. [true/false]
91 showMinutesLeadingZero
: true, // Define whether or not to show a leading zero for minutes < 10.
92 altField
: '', // Selector for an alternate field to store selected time into
93 defaultTime
: '', // Used as default time when input field is empty or for inline timePicker
96 onHourShow
: null, // callback for enabling / disabling on selectable hours ex : function(hour) { return true; }
97 onMinuteShow
: null // callback for enabling / disabling on time selection ex : function(hour,minute) { return true; }
99 $.extend(this._defaults
, this.regional
['']);
101 this.tpDiv
= $('<div id="' + this._mainDivId
+ '" class="ui-timepicker ui-widget ui-helper-clearfix ui-corner-all " style="display: none"></div>');
104 $.extend(Timepicker
.prototype, {
105 /* Class name added to elements to indicate already configured with a time picker. */
106 markerClassName
: 'hasTimepicker',
108 /* Debug logging (if enabled). */
111 console
.log
.apply('', arguments
);
114 // TODO rename to "widget" when switching to widget factory
115 _widgetTimepicker: function () {
119 /* Override the default settings for all instances of the time picker.
120 @param settings object - the new settings to use as defaults (anonymous object)
121 @return the manager object */
122 setDefaults: function (settings
) {
123 extendRemove(this._defaults
, settings
|| {});
127 /* Attach the time picker to a jQuery selection.
128 @param target element - the target input field or division or span
129 @param settings object - the new settings to use for this time picker instance (anonymous) */
130 _attachTimepicker: function (target
, settings
) {
131 // check for settings on the control itself - in namespace 'time:'
132 var inlineSettings
= null;
133 for (var attrName
in this._defaults
) {
134 var attrValue
= target
.getAttribute('time:' + attrName
);
136 inlineSettings
= inlineSettings
|| {};
138 inlineSettings
[attrName
] = eval(attrValue
);
140 inlineSettings
[attrName
] = attrValue
;
144 var nodeName
= target
.nodeName
.toLowerCase();
145 var inline
= (nodeName
== 'div' || nodeName
== 'span');
149 target
.id
= 'tp' + this.uuid
;
151 var inst
= this._newInst($(target
), inline
);
152 inst
.settings
= $.extend({}, settings
|| {}, inlineSettings
|| {});
153 if (nodeName
== 'input') {
154 this._connectTimepicker(target
, inst
);
156 this._inlineTimepicker(target
, inst
);
160 /* Create a new instance object. */
161 _newInst: function (target
, inline
) {
162 var id
= target
[0].id
.replace(/([^A-Za-z0-9_-])/g, '\\\\$1'); // escape jQuery meta chars
163 return { id
: id
, input
: target
, // associated target
164 selectedDay
: 0, selectedMonth
: 0, selectedYear
: 0, // current selection
165 drawMonth
: 0, drawYear
: 0, // month being drawn
166 inline
: inline
, // is timepicker inline or not :
167 tpDiv
: (!inline
? this.tpDiv
: // presentation div
168 $('<div class="' + this._inlineClass
+ ' ui-timepicker ui-widget ui-helper-clearfix"></div>'))
172 /* Attach the time picker to an input field. */
173 _connectTimepicker: function (target
, inst
) {
174 var input
= $(target
);
176 inst
.trigger
= $([]);
177 if (input
.hasClass(this.markerClassName
)) { return; }
178 this._attachments(input
, inst
);
179 input
.addClass(this.markerClassName
).
180 keydown(this._doKeyDown
).
181 keyup(this._doKeyUp
).
182 bind("setData.timepicker", function (event
, key
, value
) {
183 inst
.settings
[key
] = value
;
185 bind("getData.timepicker", function (event
, key
) {
186 return this._get(inst
, key
);
188 //this._autoSize(inst);
189 $.data(target
, PROP_NAME
, inst
);
192 /* Handle keystrokes. */
193 _doKeyDown: function (event
) {
194 var inst
= $.timepicker
._getInst(event
.target
);
196 inst
._keyEvent
= true;
197 if ($.timepicker
._timepickerShowing
) {
198 switch (event
.keyCode
) {
199 case 9: $.timepicker
._hideTimepicker();
201 break; // hide on tab out
202 case 27: $.timepicker
._hideTimepicker();
203 break; // hide on escape
204 default: handled
= false;
207 else if (event
.keyCode
== 36 && event
.ctrlKey
) { // display the time picker on ctrl+home
208 $.timepicker
._showTimepicker(this);
214 event
.preventDefault();
215 event
.stopPropagation();
219 /* Update selected time on keyUp */
220 /* Added verion 0.0.5 */
221 _doKeyUp: function (event
) {
222 var inst
= $.timepicker
._getInst(event
.target
);
223 $.timepicker
._setTimeFromField(inst
);
224 $.timepicker
._updateTimepicker(inst
);
227 /* Make attachments based on settings. */
228 _attachments: function (input
, inst
) {
229 var appendText
= this._get(inst
, 'appendText');
230 var isRTL
= this._get(inst
, 'isRTL');
231 if (inst
.append
) { inst
.append
.remove(); }
233 inst
.append
= $('<span class="' + this._appendClass
+ '">' + appendText
+ '</span>');
234 input
[isRTL
? 'before' : 'after'](inst
.append
);
236 input
.unbind('focus', this._showTimepicker
);
237 if (inst
.trigger
) { inst
.trigger
.remove(); }
238 var showOn
= this._get(inst
, 'showOn');
239 if (showOn
== 'focus' || showOn
== 'both') { // pop-up time picker when in the marked field
240 input
.focus(this._showTimepicker
);
242 if (showOn
== 'button' || showOn
== 'both') { // pop-up time picker when button clicked
243 var buttonText
= this._get(inst
, 'buttonText');
244 var buttonImage
= this._get(inst
, 'buttonImage');
245 inst
.trigger
= $(this._get(inst
, 'buttonImageOnly') ?
246 $('<img/>').addClass(this._triggerClass
).
247 attr({ src
: buttonImage
, alt
: buttonText
, title
: buttonText
}) :
248 $('<button type="button"></button>').addClass(this._triggerClass
).
249 html(buttonImage
== '' ? buttonText
: $('<img/>').attr(
250 { src
: buttonImage
, alt
: buttonText
, title
: buttonText
})));
251 input
[isRTL
? 'before' : 'after'](inst
.trigger
);
252 inst
.trigger
.click(function () {
253 if ($.timepicker
._timepickerShowing
&& $.timepicker
._lastInput
== input
[0]) { $.timepicker
._hideTimepicker(); }
254 else { $.timepicker
._showTimepicker(input
[0]); }
261 /* Attach an inline time picker to a div. */
262 _inlineTimepicker: function(target
, inst
) {
263 var divSpan
= $(target
);
264 if (divSpan
.hasClass(this.markerClassName
))
266 divSpan
.addClass(this.markerClassName
).append(inst
.tpDiv
).
267 bind("setData.timepicker", function(event
, key
, value
){
268 inst
.settings
[key
] = value
;
269 }).bind("getData.timepicker", function(event
, key
){
270 return this._get(inst
, key
);
272 $.data(target
, PROP_NAME
, inst
);
274 this._setTimeFromField(inst
);
275 this._updateTimepicker(inst
);
279 /* Pop-up the time picker for a given input field.
280 @param input element - the input field attached to the time picker or
281 event - if triggered by focus */
282 _showTimepicker: function (input
) {
283 input
= input
.target
|| input
;
284 if (input
.nodeName
.toLowerCase() != 'input') { input
= $('input', input
.parentNode
)[0]; } // find from button/image trigger
285 if ($.timepicker
._isDisabledTimepicker(input
) || $.timepicker
._lastInput
== input
) { return; } // already here
287 var inst
= $.timepicker
._getInst(input
);
288 if ($.timepicker
._curInst
&& $.timepicker
._curInst
!= inst
) {
289 $.timepicker
._curInst
.tpDiv
.stop(true, true);
291 var beforeShow
= $.timepicker
._get(inst
, 'beforeShow');
292 extendRemove(inst
.settings
, (beforeShow
? beforeShow
.apply(input
, [input
, inst
]) : {}));
294 $.timepicker
._lastInput
= input
;
296 $.timepicker
._setTimeFromField(inst
);
297 if ($.timepicker
._inDialog
) { input
.value
= ''; } // hide cursor
298 if (!$.timepicker
._pos
) { // position below input
299 $.timepicker
._pos
= $.timepicker
._findPos(input
);
300 $.timepicker
._pos
[1] += input
.offsetHeight
; // add the height
303 $(input
).parents().each(function () {
304 isFixed
|= $(this).css('position') == 'fixed';
307 if (isFixed
&& $.browser
.opera
) { // correction for Opera when fixed and scrolled
308 $.timepicker
._pos
[0] -= document
.documentElement
.scrollLeft
;
309 $.timepicker
._pos
[1] -= document
.documentElement
.scrollTop
;
311 var offset
= { left
: $.timepicker
._pos
[0], top
: $.timepicker
._pos
[1] };
312 $.timepicker
._pos
= null;
313 // determine sizing offscreen
314 inst
.tpDiv
.css({ position
: 'absolute', display
: 'block', top
: '-1000px' });
315 $.timepicker
._updateTimepicker(inst
);
317 // reset clicked state
318 inst
._hoursClicked
= false;
319 inst
._minutesClicked
= false;
321 // fix width for dynamic number of time pickers
322 // and adjust position before showing
323 offset
= $.timepicker
._checkOffset(inst
, offset
, isFixed
);
324 inst
.tpDiv
.css({ position
: ($.timepicker
._inDialog
&& $.blockUI
?
325 'static' : (isFixed
? 'fixed' : 'absolute')), display
: 'none',
326 left
: offset
.left
+ 'px', top
: offset
.top
+ 'px'
329 var showAnim
= $.timepicker
._get(inst
, 'showAnim');
330 var duration
= $.timepicker
._get(inst
, 'duration');
331 var postProcess = function () {
332 $.timepicker
._timepickerShowing
= true;
333 var borders
= $.timepicker
._getBorders(inst
.tpDiv
);
334 inst
.tpDiv
.find('iframe.ui-timepicker-cover'). // IE6- only
335 css({ left
: -borders
[0], top
: -borders
[1],
336 width
: inst
.tpDiv
.outerWidth(), height
: inst
.tpDiv
.outerHeight()
339 inst
.tpDiv
.zIndex($(input
).zIndex() + 1);
340 if ($.effects
&& $.effects
[showAnim
]) {
341 inst
.tpDiv
.show(showAnim
, $.timepicker
._get(inst
, 'showOptions'), duration
, postProcess
);
344 inst
.tpDiv
[showAnim
|| 'show']((showAnim
? duration
: null), postProcess
);
346 if (!showAnim
|| !duration
) { postProcess(); }
347 if (inst
.input
.is(':visible') && !inst
.input
.is(':disabled')) { inst
.input
.focus(); }
348 $.timepicker
._curInst
= inst
;
352 /* Generate the time picker content. */
353 _updateTimepicker: function (inst
) {
355 var borders
= $.timepicker
._getBorders(inst
.tpDiv
);
356 inst
.tpDiv
.empty().append(this._generateHTML(inst
))
357 .find('iframe.ui-timepicker-cover') // IE6- only
358 .css({ left
: -borders
[0], top
: -borders
[1],
359 width
: inst
.tpDiv
.outerWidth(), height
: inst
.tpDiv
.outerHeight()
362 .find('.ui-timepicker td a')
363 .bind('mouseout', function () {
364 $(this).removeClass('ui-state-hover');
365 if (this.className
.indexOf('ui-timepicker-prev') != -1) $(this).removeClass('ui-timepicker-prev-hover');
366 if (this.className
.indexOf('ui-timepicker-next') != -1) $(this).removeClass('ui-timepicker-next-hover');
368 .bind('mouseover', function () {
369 if (!self
._isDisabledTimepicker(inst
.inline
? inst
.tpDiv
.parent()[0] : inst
.input
[0])) {
370 $(this).parents('.ui-timepicker-calendar').find('a').removeClass('ui-state-hover');
371 $(this).addClass('ui-state-hover');
372 if (this.className
.indexOf('ui-timepicker-prev') != -1) $(this).addClass('ui-timepicker-prev-hover');
373 if (this.className
.indexOf('ui-timepicker-next') != -1) $(this).addClass('ui-timepicker-next-hover');
377 .find('.' + this._dayOverClass
+ ' a')
378 .trigger('mouseover')
382 /* Generate the HTML for the current state of the date picker. */
383 _generateHTML: function (inst
) {
385 var showPeriod
= (this._get(inst
, 'showPeriod') == true);
386 var showLeadingZero
= (this._get(inst
, 'showLeadingZero') == true);
388 var amPmText
= this._get(inst
, 'amPmText');
391 html
= '<table class="ui-timepicker-table ui-widget-content ui-corner-all"><tr>' +
392 '<td class="ui-timepicker-hours">' +
393 '<div class="ui-timepicker-title ui-widget-header ui-helper-clearfix ui-corner-all">' +
394 this._get(inst
, 'hourText') +
396 '<table class="ui-timepicker">';
399 html
+= '<tr><th rowspan="2" class="periods">' + amPmText
[0] + '</th>';
400 for (h
= 0; h
<= 5; h
++) {
401 html
+= this._generateHTMLHourCell(inst
, h
, showPeriod
, showLeadingZero
);
405 for (h
= 6; h
<= 11; h
++) {
406 html
+= this._generateHTMLHourCell(inst
, h
, showPeriod
, showLeadingZero
);
410 html
+= '</tr><tr><th rowspan="2" class="periods">' + amPmText
[1] + '</th>';
411 for (h
= 12; h
<= 17; h
++) {
412 html
+= this._generateHTMLHourCell(inst
, h
, showPeriod
, showLeadingZero
);
416 for (h
= 18; h
<= 23; h
++) {
417 html
+= this._generateHTMLHourCell(inst
, h
, showPeriod
, showLeadingZero
);
419 html
+= '</tr></table>' + // Close the hours cells table
420 '</td>' + // Close the Hour td
421 '<td class="ui-timepicker-minutes">';
423 html
+= this._generateHTMLMinutes(inst
);
425 html
+= '</td></tr></table>';
430 /* Special function that update the minutes selection in currently visible timepicker
431 * called on hour selection when onMinuteShow is defined */
432 _updateMinuteDisplay: function (inst
) {
433 var newHtml
= this._generateHTMLMinutes(inst
);
434 inst
.tpDiv
.find('td.ui-timepicker-minutes').html(newHtml
);
437 /* Generate the minutes table */
438 _generateHTMLMinutes: function (inst
) {
441 var showMinutesLeadingZero
= (this._get(inst
, 'showMinutesLeadingZero') == true);
442 var onMinuteShow
= this._get(inst
, 'onMinuteShow');
443 // if currently selected minute is not enabled, we have a problem and need to select a new minute.
444 if ( (onMinuteShow
) ) {
446 if (onMinuteShow
.apply((inst
.input
? inst
.input
[0] : null), [inst
.hours
, inst
.minutes
]) == false) {
447 // loop minutes and select first available
448 for (m
= 0; m
< 60; m
+= 5) {
449 if (onMinuteShow
.apply((inst
.input
? inst
.input
[0] : null), [inst
.hours
, m
])) {
457 var html
= '' + // open minutes td
458 /* Add the minutes */
459 '<div class="ui-timepicker-title ui-widget-header ui-helper-clearfix ui-corner-all">' +
460 this._get(inst
, 'minuteText') +
462 '<table class="ui-timepicker">' +
466 for (m
= 0; m
< 15; m
+= 5) {
467 html
+= this._generateHTMLMinuteCell(inst
, m
, (m
< 10) && showMinutesLeadingZero
? "0" + m
.toString() : m
.toString());
470 for (m
= 15; m
< 30; m
+= 5) {
471 html
+= this._generateHTMLMinuteCell(inst
, m
, m
.toString());
474 for (m
= 30; m
< 45; m
+= 5) {
475 html
+= this._generateHTMLMinuteCell(inst
, m
, m
.toString());
478 for (m
= 45; m
< 60; m
+= 5) {
479 html
+= this._generateHTMLMinuteCell(inst
, m
, m
.toString());
482 html
+= '</tr></table>';
487 /* Generate the content of a "Hour" cell */
488 _generateHTMLHourCell: function (inst
, hour
, showPeriod
, showLeadingZero
) {
490 var displayHour
= hour
;
491 if ((hour
> 12) && showPeriod
) {
492 displayHour
= hour
- 12;
494 if ((displayHour
== 0) && showPeriod
) {
497 if ((displayHour
< 10) && showLeadingZero
) {
498 displayHour
= '0' + displayHour
;
503 var onHourShow
= this._get(inst
, 'onHourShow'); //custom callback
505 enabled
= onHourShow
.apply((inst
.input
? inst
.input
[0] : null), [hour
]);
510 'onclick="TP_jQuery_' + tpuuid
+ '.timepicker.selectHours(\'#' + inst
.id
+ '\', ' + hour
.toString() + ', this ); return false;" ' +
511 'ondblclick="TP_jQuery_' + tpuuid
+ '.timepicker.selectHours(\'#' + inst
.id
+ '\', ' + hour
.toString() + ', this, true ); return false;" ' +
513 '<a href="#" class="ui-state-default ' +
514 (hour
== inst
.hours
? 'ui-state-active' : '') +
516 displayHour
.toString() +
522 '<span class="ui-state-default ui-state-disabled' +
523 (hour
== inst
.hours
? 'ui-state-active' : '') +
525 displayHour
.toString() +
532 /* Generate the content of a "Hour" cell */
533 _generateHTMLMinuteCell: function (inst
, minute
, displayText
) {
536 var onMinuteShow
= this._get(inst
, 'onMinuteShow'); //custom callback
538 //NEW: 2011-02-03 we should give the hour as a parameter as well!
539 enabled
= onMinuteShow
.apply((inst
.input
? inst
.input
[0] : null), [inst
.hours
,minute
]); //trigger callback
544 'onclick="TP_jQuery_' + tpuuid
+ '.timepicker.selectMinutes(\'#' + inst
.id
+ '\', ' + minute
.toString() + ', this ); return false;" ' +
545 'ondblclick="TP_jQuery_' + tpuuid
+ '.timepicker.selectMinutes(\'#' + inst
.id
+ '\', ' + minute
.toString() + ', this, true ); return false;" ' +
547 '<a href="#" class="ui-state-default ' +
548 (minute
== inst
.minutes
? 'ui-state-active' : '') +
556 '<span class="ui-state-default ui-state-disabled" >' +
564 /* Is the first field in a jQuery collection disabled as a timepicker?
565 @param target element - the target input field or division or span
566 @return boolean - true if disabled, false if enabled */
567 _isDisabledTimepicker: function (target
) {
568 if (!target
) { return false; }
569 for (var i
= 0; i
< this._disabledInputs
.length
; i
++) {
570 if (this._disabledInputs
[i
] == target
) { return true; }
575 /* Check positioning to remain on screen. */
576 _checkOffset: function (inst
, offset
, isFixed
) {
577 var tpWidth
= inst
.tpDiv
.outerWidth();
578 var tpHeight
= inst
.tpDiv
.outerHeight();
579 var inputWidth
= inst
.input
? inst
.input
.outerWidth() : 0;
580 var inputHeight
= inst
.input
? inst
.input
.outerHeight() : 0;
581 var viewWidth
= document
.documentElement
.clientWidth
+ $(document
).scrollLeft();
582 var viewHeight
= document
.documentElement
.clientHeight
+ $(document
).scrollTop();
584 offset
.left
-= (this._get(inst
, 'isRTL') ? (tpWidth
- inputWidth
) : 0);
585 offset
.left
-= (isFixed
&& offset
.left
== inst
.input
.offset().left
) ? $(document
).scrollLeft() : 0;
586 offset
.top
-= (isFixed
&& offset
.top
== (inst
.input
.offset().top
+ inputHeight
)) ? $(document
).scrollTop() : 0;
588 // now check if datepicker is showing outside window viewport - move to a better place if so.
589 offset
.left
-= Math
.min(offset
.left
, (offset
.left
+ tpWidth
> viewWidth
&& viewWidth
> tpWidth
) ?
590 Math
.abs(offset
.left
+ tpWidth
- viewWidth
) : 0);
591 offset
.top
-= Math
.min(offset
.top
, (offset
.top
+ tpHeight
> viewHeight
&& viewHeight
> tpHeight
) ?
592 Math
.abs(tpHeight
+ inputHeight
) : 0);
597 /* Find an object's position on the screen. */
598 _findPos: function (obj
) {
599 var inst
= this._getInst(obj
);
600 var isRTL
= this._get(inst
, 'isRTL');
601 while (obj
&& (obj
.type
== 'hidden' || obj
.nodeType
!= 1)) {
602 obj
= obj
[isRTL
? 'previousSibling' : 'nextSibling'];
604 var position
= $(obj
).offset();
605 return [position
.left
, position
.top
];
608 /* Retrieve the size of left and top borders for an element.
609 @param elem (jQuery object) the element of interest
610 @return (number[2]) the left and top borders */
611 _getBorders: function (elem
) {
612 var convert = function (value
) {
613 return { thin
: 1, medium
: 2, thick
: 3}[value
] || value
;
615 return [parseFloat(convert(elem
.css('border-left-width'))),
616 parseFloat(convert(elem
.css('border-top-width')))];
620 /* Close time picker if clicked elsewhere. */
621 _checkExternalClick: function (event
) {
622 if (!$.timepicker
._curInst
) { return; }
623 var $target
= $(event
.target
);
624 if ($target
[0].id
!= $.timepicker
._mainDivId
&&
625 $target
.parents('#' + $.timepicker
._mainDivId
).length
== 0 &&
626 !$target
.hasClass($.timepicker
.markerClassName
) &&
627 !$target
.hasClass($.timepicker
._triggerClass
) &&
628 $.timepicker
._timepickerShowing
&& !($.timepicker
._inDialog
&& $.blockUI
))
629 $.timepicker
._hideTimepicker();
632 /* Hide the time picker from view.
633 @param input element - the input field attached to the time picker */
634 _hideTimepicker: function (input
) {
635 var inst
= this._curInst
;
636 if (!inst
|| (input
&& inst
!= $.data(input
, PROP_NAME
))) { return; }
637 if (this._timepickerShowing
) {
638 var showAnim
= this._get(inst
, 'showAnim');
639 var duration
= this._get(inst
, 'duration');
640 var postProcess = function () {
641 $.timepicker
._tidyDialog(inst
);
642 this._curInst
= null;
644 if ($.effects
&& $.effects
[showAnim
]) {
645 inst
.tpDiv
.hide(showAnim
, $.timepicker
._get(inst
, 'showOptions'), duration
, postProcess
);
648 inst
.tpDiv
[(showAnim
== 'slideDown' ? 'slideUp' :
649 (showAnim
== 'fadeIn' ? 'fadeOut' : 'hide'))]((showAnim
? duration
: null), postProcess
);
651 if (!showAnim
) { postProcess(); }
652 var onClose
= this._get(inst
, 'onClose');
655 (inst
.input
? inst
.input
[0] : null),
656 [(inst
.input
? inst
.input
.val() : ''), inst
]); // trigger custom callback
658 this._timepickerShowing
= false;
659 this._lastInput
= null;
660 if (this._inDialog
) {
661 this._dialogInput
.css({ position
: 'absolute', left
: '0', top
: '-100px' });
664 $('body').append(this.tpDiv
);
667 this._inDialog
= false;
671 /* Tidy up after a dialog display. */
672 _tidyDialog: function (inst
) {
673 inst
.tpDiv
.removeClass(this._dialogClass
).unbind('.ui-timepicker');
676 /* Retrieve the instance data for the target control.
677 @param target element - the target input field or division or span
678 @return object - the associated instance data
679 @throws error if a jQuery problem getting data */
680 _getInst: function (target
) {
682 return $.data(target
, PROP_NAME
);
685 throw 'Missing instance data for this timepicker';
689 /* Get a setting value, defaulting if necessary. */
690 _get: function (inst
, name
) {
691 return inst
.settings
[name
] !== undefined ?
692 inst
.settings
[name
] : this._defaults
[name
];
695 /* Parse existing time and initialise time picker. */
696 _setTimeFromField: function (inst
) {
697 if (inst
.input
.val() == inst
.lastVal
) { return; }
698 var defaultTime
= this._get(inst
, 'defaultTime');
701 var timeToParse
= this._getCurrentTimeRounded(inst
);
702 if (defaultTime
!= '') { timeToParse
= defaultTime
}
703 if ((inst
.inline
== false) && (inst
.input
.val() != '')) { timeToParse
= inst
.input
.val() }
705 var timeVal
= inst
.lastVal
= timeToParse
;
707 var time
= this.parseTime(inst
, timeVal
);
708 inst
.hours
= time
.hours
;
709 inst
.minutes
= time
.minutes
;
711 $.timepicker
._updateTimepicker(inst
);
713 /* Set the dates for a jQuery selection.
714 @param target element - the target input field or division or span
715 @param date Date - the new date */
716 _setTimeTimepicker: function(target
, time
) {
717 var inst
= this._getInst(target
);
719 this._setTime(inst
, time
);
720 this._updateTimepicker(inst
);
721 this._updateAlternate(inst
);
725 /* Set the tm directly. */
726 _setTime: function(inst
, time
, noChange
) {
728 var origHours
= inst
.hours
;
729 var origMinutes
= inst
.minutes
;
730 var time
= this.parseTime(inst
, time
);
731 inst
.hours
= time
.hours
;
732 inst
.minutes
= time
.minutes
;
734 if ((origHours
!= inst
.hours
|| origMinutes
!= inst
.minuts
) && !noChange
) {
735 inst
.input
.trigger('change');
737 this._updateTimepicker(inst
);
738 this._updateSelectedValue(inst
);
741 /* Return the current time, ready to be parsed, rounded to the closest 5 minute */
742 _getCurrentTimeRounded: function (inst
) {
743 var currentTime
= new Date();
744 var timeSeparator
= this._get(inst
, 'timeSeparator');
745 // setting selected time , least priority first
746 var currentMinutes
= currentTime
.getMinutes()
747 // round to closest 5
748 currentMinutes
= Math
.round( currentMinutes
/ 5 ) * 5;
750 return currentTime
.getHours().toString() + timeSeparator
+ currentMinutes
.toString();
754 * Pase a time string into hours and minutes
756 parseTime: function (inst
, timeVal
) {
757 var retVal
= new Object();
761 var timeSeparator
= this._get(inst
, 'timeSeparator');
762 var amPmText
= this._get(inst
, 'amPmText');
763 var p
= timeVal
.indexOf(timeSeparator
);
764 if (p
== -1) { return retVal
; }
766 retVal
.hours
= parseInt(timeVal
.substr(0, p
), 10);
767 retVal
.minutes
= parseInt(timeVal
.substr(p
+ 1), 10);
769 var showPeriod
= (this._get(inst
, 'showPeriod') == true);
770 var timeValUpper
= timeVal
.toUpperCase();
771 if ((retVal
.hours
< 12) && (showPeriod
) && (timeValUpper
.indexOf(amPmText
[1].toUpperCase()) != -1)) {
775 if ((retVal
.hours
== 12) && (showPeriod
) && (timeValUpper
.indexOf(amPmText
[0].toUpperCase()) != -1)) {
784 selectHours: function (id
, newHours
, td
, fromDoubleClick
) {
786 var inst
= this._getInst(target
[0]);
787 $(td
).parents('.ui-timepicker-hours:first').find('a').removeClass('ui-state-active');
788 //inst.tpDiv.children('.ui-timepicker-hours a').removeClass('ui-state-active');
789 $(td
).children('a').addClass('ui-state-active');
791 inst
.hours
= newHours
;
792 this._updateSelectedValue(inst
);
794 inst
._hoursClicked
= true;
795 if ((inst
._minutesClicked
) || (fromDoubleClick
)) {
796 $.timepicker
._hideTimepicker();
799 // added for onMinuteShow callback
800 var onMinuteShow
= this._get(inst
, 'onMinuteShow');
801 if (onMinuteShow
) { this._updateMinuteDisplay(inst
); }
804 selectMinutes: function (id
, newMinutes
, td
, fromDoubleClick
) {
806 var inst
= this._getInst(target
[0]);
807 $(td
).parents('.ui-timepicker-minutes:first').find('a').removeClass('ui-state-active');
808 $(td
).children('a').addClass('ui-state-active');
810 inst
.minutes
= newMinutes
;
811 this._updateSelectedValue(inst
);
813 inst
._minutesClicked
= true;
814 if ((inst
._hoursClicked
) || (fromDoubleClick
)) { $.timepicker
._hideTimepicker(); }
817 _updateSelectedValue: function (inst
) {
818 if ((inst
.hours
< 0) || (inst
.hours
> 23)) { inst
.hours
= 12; }
819 if ((inst
.minutes
< 0) || (inst
.minutes
> 59)) { inst
.minutes
= 0; }
822 var showPeriod
= (this._get(inst
, 'showPeriod') == true);
823 var showLeadingZero
= (this._get(inst
, 'showLeadingZero') == true);
824 var amPmText
= this._get(inst
, 'amPmText');
825 var selectedHours
= inst
.hours
? inst
.hours
: 0;
826 var selectedMinutes
= inst
.minutes
? inst
.minutes
: 0;
828 var displayHours
= selectedHours
;
829 if ( ! displayHours
) {
835 if (inst
.hours
== 0) {
838 if (inst
.hours
< 12) {
839 period
= amPmText
[0];
842 period
= amPmText
[1];
843 if (displayHours
> 12) {
849 var h
= displayHours
.toString();
850 if (showLeadingZero
&& (displayHours
< 10)) { h
= '0' + h
; }
853 var m
= selectedMinutes
.toString();
854 if (selectedMinutes
< 10) { m
= '0' + m
; }
856 var newTime
= h
+ this._get(inst
, 'timeSeparator') + m
;
857 if (period
.length
> 0) { newTime
+= " " + period
; }
860 inst
.input
.val(newTime
);
861 inst
.input
.trigger('change');
864 var onSelect
= this._get(inst
, 'onSelect');
865 if (onSelect
) { onSelect
.apply((inst
.input
? inst
.input
[0] : null), [newTime
, inst
]); } // trigger custom callback
867 this._updateAlternate(inst
, newTime
);
872 /* Update any alternate field to synchronise with the main field. */
873 _updateAlternate: function(inst
, newTime
) {
874 var altField
= this._get(inst
, 'altField');
875 if (altField
) { // update alternate field too
876 $(altField
).each(function() { $(this).val(newTime
); });
883 /* Invoke the timepicker functionality.
884 @param options string - a command, optionally followed by additional parameters or
885 Object - settings for attaching new datepicker functionality
886 @return jQuery object */
887 $.fn
.timepicker = function (options
) {
889 /* Initialise the date picker. */
890 if (!$.timepicker
.initialized
) {
891 $(document
).mousedown($.timepicker
._checkExternalClick
).
892 find('body').append($.timepicker
.tpDiv
);
893 $.timepicker
.initialized
= true;
896 var otherArgs
= Array
.prototype.slice
.call(arguments
, 1);
897 if (typeof options
== 'string' && (options
== 'isDisabled' || options
== 'getTime' || options
== 'widget'))
898 return $.timepicker
['_' + options
+ 'Datepicker'].
899 apply($.timepicker
, [this[0]].concat(otherArgs
));
900 if (options
== 'option' && arguments
.length
== 2 && typeof arguments
[1] == 'string')
901 return $.timepicker
['_' + options
+ 'Datepicker'].
902 apply($.timepicker
, [this[0]].concat(otherArgs
));
903 return this.each(function () {
904 typeof options
== 'string' ?
905 $.timepicker
['_' + options
+ 'Timepicker'].
906 apply($.timepicker
, [this].concat(otherArgs
)) :
907 $.timepicker
._attachTimepicker(this, options
);
911 /* jQuery extend now ignores nulls! */
912 function extendRemove(target
, props
) {
913 $.extend(target
, props
);
914 for (var name
in props
)
915 if (props
[name
] == null || props
[name
] == undefined)
916 target
[name
] = props
[name
];
920 $.timepicker
= new Timepicker(); // singleton instance
921 $.timepicker
.initialized
= false;
922 $.timepicker
.uuid
= new Date().getTime();
923 $.timepicker
.version
= "1.8.6";
925 // Workaround for #4055
926 // Add another global to avoid noConflict issues with inline event handlers
927 window
['TP_jQuery_' + tpuuid
] = $;