diff --git a/jquery-ui-timepicker-addon.js b/jquery-ui-timepicker-addon.js index 3f591bf..0ec4d0f 100644 --- a/jquery-ui-timepicker-addon.js +++ b/jquery-ui-timepicker-addon.js @@ -2,7 +2,7 @@ * jQuery timepicker addon * By: Trent Richardson [http://trentrichardson.com] * Version 0.8.1 -* Last Modified: 11/18/2010 by Charles Phillips +* Last Modified: 11/26/2010 by Charles Phillips * * Copyright 2010 Trent Richardson * Dual licensed under the MIT and GPL licenses. @@ -18,7 +18,7 @@ */ (function($) { - + $.extend($.ui, { timepicker: { version: "0.8.1" } }); /* Time picker manager. @@ -80,7 +80,7 @@ $.extend(Timepicker.prototype, { formattedDate: '', formattedTime: '', formattedDateTime: '', - + /* Override the default settings for all instances of the time picker. @param settings object - the new settings to use as defaults (anonymous object) @return the manager object */ @@ -95,7 +95,7 @@ $.extend(Timepicker.prototype, { _newInst: function($input, o) { var tp_inst = new Timepicker(), inlineSettings = {}; - + for (var attrName in tp_inst._defaults) { var attrValue = $input.attr('time:' + attrName); if (attrValue) { @@ -148,18 +148,27 @@ $.extend(Timepicker.prototype, { var currDT = (this.$altInput) ? this.$input.val() + ' ' + this.$altInput.val() : this.$input.val(), - - regstr = this._defaults.timeFormat.toString() + parsedDT = this._parseTime(currDT); + + this.timeDefined = (parsedDT) ? true : false; + this._injectTimePicker(); + }, + + //######################################################################## + // parse the time string from input value or _setTime + //######################################################################## + _parseTime: function(timeString, withDate) { + var regstr = this._defaults.timeFormat.toString() .replace(/h{1,2}/ig, '(\\d?\\d)') .replace(/m{1,2}/ig, '(\\d?\\d)') .replace(/s{1,2}/ig, '(\\d?\\d)') .replace(/t{1,2}/ig, '(am|pm|a|p)?') .replace(/\s/g, '\\s?') + '$', - treg = currDT.match(new RegExp(regstr, 'i')), + treg = timeString.match(new RegExp(regstr, 'i')), order = this._getFormatPositions(); - if (!this._defaults.timeOnly) { + if (withDate || !this._defaults.timeOnly) { // the time should come after x number of characters and a space. // x = at least the length of text specified by the date format var dp_dateFormat = $.datepicker._get(this.inst, 'dateFormat'); @@ -183,9 +192,6 @@ $.extend(Timepicker.prototype, { if (order.m !== -1) this.minute = treg[order.m]; if (order.s !== -1) this.second = treg[order.s]; } - - this.timeDefined = (treg) ? true : false; - this._injectTimePicker(); }, //######################################################################## @@ -237,8 +243,8 @@ $.extend(Timepicker.prototype, { html += '
' + '
' + '
'; - - for (var h = 0; h < hourMax; h += o.hourGrid) { + + for (var h = o.hourMin; h < hourMax; h += o.hourGrid) { hourGridSize++; var tmph = (o.ampm && h > 12) ? h-12 : h; if (tmph < 10) tmph = '0' + tmph; @@ -249,45 +255,45 @@ $.extend(Timepicker.prototype, { } html += ''; } - + html += '
' + tmph + '
' + '
'; } else html += '
'; - + html += '
' + o.minuteText + '
'; - + if (o.showMinute && o.minuteGrid > 0) { html += '
' + '
' + '
'; - - for (var m = 0; m < minMax; m += o.minuteGrid) { + + for (var m = o.minuteMin; m < minMax; m += o.minuteGrid) { minuteGridSize++; html += ''; } - + html += '
' + ((m < 10) ? '0' : '') + m + '
' + '
'; } else html += '
'; - + html += '
' + o.secondText + '
'; - + if (o.showSecond && o.secondGrid > 0) { html += '
' + '
' + '
'; - - for (var s = 0; s < secMax; s += o.secondGrid) { + + for (var s = o.secondMin; s < secMax; s += o.secondGrid) { secondGridSize++; html += ''; } - + html += '
' + ((s < 10) ? '0' : '') + s + '
' + '
'; } else html += '
'); $dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide(); } - + this.hour_slider = $tp.find('#ui_tpicker_hour_'+ dp_id).slider({ orientation: "horizontal", value: this.hour, @@ -316,7 +322,7 @@ $.extend(Timepicker.prototype, { tp_inst._onTimeChange(); } }); - + // Updated by Peter Medeiros: // - Pass in Event and UI instance into slide function this.minute_slider = $tp.find('#ui_tpicker_minute_'+ dp_id).slider({ @@ -331,7 +337,7 @@ $.extend(Timepicker.prototype, { tp_inst._onTimeChange(); } }); - + this.second_slider = $tp.find('#ui_tpicker_second_'+ dp_id).slider({ orientation: "horizontal", value: this.second, @@ -343,11 +349,11 @@ $.extend(Timepicker.prototype, { tp_inst._onTimeChange(); } }); - + // Add grid functionality if (o.showHour && o.hourGrid > 0) { size = 100 * hourGridSize * o.hourGrid / (hourMax - o.hourMin); - + $tp.find(".ui_tpicker_hour table").css({ width: size + "%", marginLeft: (size / (-2 * hourGridSize)) + "%", @@ -374,7 +380,7 @@ $.extend(Timepicker.prototype, { }); }); } - + if (o.showMinute && o.minuteGrid > 0) { size = 100 * minuteGridSize * o.minuteGrid / (minMax - o.minuteMin); $tp.find(".ui_tpicker_minute table").css({ @@ -393,7 +399,7 @@ $.extend(Timepicker.prototype, { }); }); } - + if (o.showSecond && o.secondGrid > 0) { $tp.find(".ui_tpicker_second table").css({ width: size + "%", @@ -415,9 +421,9 @@ $.extend(Timepicker.prototype, { var $buttonPanel = $dp.find('.ui-datepicker-buttonpane'); if ($buttonPanel.length) $buttonPanel.before($tp); else $dp.append($tp); - + this.$timeObj = $('#ui_tpicker_time_'+ dp_id); - + if (this.inst !== null) { var timeDefined = this.timeDefined; this._onTimeChange(); @@ -437,7 +443,7 @@ $.extend(Timepicker.prototype, { ampm = (hour < 11.5) ? 'AM' : 'PM', hasChanged = false; hour = (hour >= 11.5 && hour < 12) ? 12 : hour; - + // If the update was done in the input field, this field should not be updated. // If the update was done using the sliders, update the input field. if (force || this.hour != hour || this.minute != minute || this.second != second || (this.ampm.length > 0 && this.ampm != ampm)) @@ -460,36 +466,34 @@ $.extend(Timepicker.prototype, { //######################################################################## // format the time all pretty... //######################################################################## - _formatTime: function() { - var tmptime = this._defaults.timeFormat.toString(), - hour12 = ((this.ampm == 'AM') ? (this.hour) : (this.hour % 12)); - hour12 = (Number(hour12) === 0) ? 12 : hour12; - - if (this._defaults.ampm === true) { + _formatTime: function(time, format, ampm) { + if (ampm == undefined) ampm = this._defaults.ampm; + time = time || { hour: this.hour, minute: this.minute, second: this.second, ampm: this.ampm }; + var tmptime = format || this._defaults.timeFormat.toString(); + + if (ampm) { + var hour12 = ((time.ampm == 'AM') ? (time.hour) : (time.hour % 12)); + hour12 = (Number(hour12) === 0) ? 12 : hour12; tmptime = tmptime.toString() .replace(/hh/g, ((hour12 < 10) ? '0' : '') + hour12) .replace(/h/g, hour12) - .replace(/mm/g, ((this.minute < 10) ? '0' : '') + this.minute) - .replace(/m/g, this.minute) - .replace(/ss/g, ((this.second < 10) ? '0' : '') + this.second) - .replace(/s/g, this.second) - .replace(/TT/g, this.ampm.toUpperCase()) - .replace(/tt/g, this.ampm.toLowerCase()) - .replace(/T/g, this.ampm.charAt(0).toUpperCase()) - .replace(/t/g, this.ampm.charAt(0).toLowerCase()); + .replace(/TT/g, time.ampm.toUpperCase()) + .replace(/tt/g, time.ampm.toLowerCase()) + .replace(/T/g, time.ampm.charAt(0).toUpperCase()) + .replace(/t/g, time.ampm.charAt(0).toLowerCase()); } else { tmptime = tmptime.toString() - .replace(/hh/g, ((this.hour < 10) ? '0' : '') + this.hour) - .replace(/h/g, this.hour) - .replace(/mm/g, ((this.minute < 10) ? '0' : '') + this.minute) - .replace(/m/g, this.minute) - .replace(/ss/g, ((this.second < 10) ? '0' : '') + this.second) - .replace(/s/g, this.second); + .replace(/hh/g, ((time.hour < 10) ? '0' : '') + time.hour) + .replace(/h/g, time.hour) tmptime = $.trim(tmptime.replace(/t/gi, '')); } + tmptime = tmptime.replace(/mm/g, ((time.minute < 10) ? '0' : '') + time.minute) + .replace(/m/g, time.minute) + .replace(/ss/g, ((time.second < 10) ? '0' : '') + time.second) + .replace(/s/g, time.second); - this.formattedTime = tmptime; - return this.formattedTime; + if (arguments.length) return tmptime; + else this.formattedTime = tmptime; }, //######################################################################## @@ -503,7 +507,7 @@ $.extend(Timepicker.prototype, { timeAvailable = dt !== null && this.timeDefined; this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg); var formattedDateTime = this.formattedDate; - + if (dp_inst.lastVal !== undefined && (dp_inst.lastVal.length > 0 && this.$input.val().length === 0)) return; @@ -512,11 +516,11 @@ $.extend(Timepicker.prototype, { if (this.$altInput) this.$altInput.val(this.formattedTime); else formattedDateTime += ' ' + this.formattedTime; } - + this.formattedDateTime = formattedDateTime; this.$input.val(formattedDateTime).trigger("change"); } - + }); $.fn.extend({ @@ -526,9 +530,9 @@ $.fn.extend({ timepicker: function(o) { o = o || {}; var tmp_args = arguments; - + if (typeof o == 'object') tmp_args[0] = $.extend(o, { timeOnly: true }); - + return $(this).each(function() { $.fn.datetimepicker.apply($(this), tmp_args); }); @@ -536,12 +540,12 @@ $.fn.extend({ //######################################################################## // extend timepicker to datepicker - //######################################################################## + //######################################################################## datetimepicker: function(o) { o = o || {}; var $input = this, tmp_args = arguments; - + if (typeof(o) == 'string'){ if(o == 'getDate') return $.fn.datepicker.apply($(this), tmp_args); @@ -564,16 +568,16 @@ $.fn.extend({ $.datepicker._base_selectDate = $.datepicker._selectDate; $.datepicker._selectDate = function (id, dateStr) { var inst = this._getInst($(id)[0]), - tp_inst = $.datepicker._get(inst, 'timepicker'); - + tp_inst = this._get(inst, 'timepicker'); + if (tp_inst) { inst.inline = inst.stay_open = true; - inst.stay_open = inst.inline = false; - $.datepicker._base_selectDate(id, dateStr); + this._base_selectDate(id, dateStr); + inst.inline = inst.stay_open = false; this._notifyChange(inst); this._updateDatepicker(inst); } - else $.datepicker._base_selectDate(id, dateStr); + else this._base_selectDate(id, dateStr); }; //############################################################################################# @@ -608,15 +612,20 @@ $.datepicker._doKeyPress = function(event) { if (tp_inst) { if ($.datepicker._get(inst, 'constrainInput')) { - var dateChars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat')), - chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode), - chrl = chr.toLowerCase(); - // keyCode == 58 => ":" - // keyCode == 32 => " " - return event.ctrlKey || (chr < ' ' || !dateChars || dateChars.indexOf(chr) > -1 || event.keyCode == 58 || event.keyCode == 32 || chr == ':' || chr == ' ' || chrl == 'a' || chrl == 'p' || chrl == 'm'); + var ampm = tp_inst._defaults.ampm, + datetimeChars = tp_inst._defaults.timeFormat.toString() + .replace(/[hms]/g, '') + .replace(/TT/g, ampm ? 'APM' : '') + .replace(/T/g, ampm ? 'AP' : '') + .replace(/tt/g, ampm ? 'apm' : '') + .replace(/t/g, ampm ? 'ap' : '') + + " " + + $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat')), + chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode); + return event.ctrlKey || (chr < ' ' || !datetimeChars || datetimeChars.indexOf(chr) > -1); } } else return $.datepicker._base_doKeyPress(event); - + }; //####################################################################################### @@ -626,7 +635,7 @@ $.datepicker._base_doKeyUp = $.datepicker._doKeyUp; $.datepicker._doKeyUp = function (event) { var inst = $.datepicker._getInst(event.target), tp_inst = $.datepicker._get(inst, 'timepicker'); - + if (tp_inst) { if (tp_inst._defaults.timeOnly && (inst.input.val() != inst.lastVal)) { try { @@ -637,7 +646,7 @@ $.datepicker._doKeyUp = function (event) { } } } - + return $.datepicker._base_doKeyUp(event); }; @@ -646,7 +655,7 @@ $.datepicker._doKeyUp = function (event) { //####################################################################################### $.datepicker._base_gotoToday = $.datepicker._gotoToday; $.datepicker._gotoToday = function(id) { - $.datepicker._base_gotoToday(id); + this._base_gotoToday(id); this._setTime(this._getInst($(id)[0]), new Date()); }; @@ -654,61 +663,78 @@ $.datepicker._gotoToday = function(id) { // Create our own set time function //####################################################################################### $.datepicker._setTime = function(inst, date) { - var tp_inst = $.datepicker._get(inst, 'timepicker'); - + var tp_inst = this._get(inst, 'timepicker'); + if (tp_inst) { - var hour = date.getHours(), - minute = date.getMinutes(), - second = date.getSeconds(); + var defaults = tp_inst._defaults, + // calling _setTime with no date sets time to defaults + hour = date ? date.getHours() : defaults.hour, + minute = date ? date.getMinutes() : defaults.minute, + second = date ? date.getSeconds() : defaults.second; //check if within min/max times.. - if ((hour < tp_inst._defaults.hourMin || hour > tp_inst._defaults.hourMax) || (minute < tp_inst._defaults.minuteMin || minute > tp_inst._defaults.minuteMax) || (second < tp_inst._defaults.secondMin || second > tp_inst._defaults.secondMax)) { - hour = tp_inst._defaults.hourMin; - minute = tp_inst._defaults.minuteMin; - second = tp_inst._defaults.secondMin; + if ((hour < defaults.hourMin || hour > defaults.hourMax) || (minute < defaults.minuteMin || minute > defaults.minuteMax) || (second < defaults.secondMin || second > defaults.secondMax)) { + hour = defaults.hourMin; + minute = defaults.minuteMin; + second = defaults.secondMin; } - if (tp_inst.hour_slider && tp_inst.minute_slider && tp_inst.second_slider) { - tp_inst.hour_slider.slider('value', hour); - tp_inst.minute_slider.slider('value', minute); - tp_inst.second_slider.slider('value', second); - } else { - tp_inst.hour = hour; - tp_inst.minute = minute; - tp_inst.second = second; - } - + if (tp_inst.hour_slider) tp_inst.hour_slider.slider('value', hour); + else tp_inst.hour = hour; + if (tp_inst.minute_slider) tp_inst.minute_slider.slider('value', minute); + else tp_inst.minute = minute; + if (tp_inst.second_slider) tp_inst.second_slider.slider('value', second); + else tp_inst.second = second; + tp_inst._onTimeChange(true); } }; //####################################################################################### -// override setDate() to allow getting time too within Date object +// Create new public method to set only time, callable as $().datepicker('setTime', date) +//####################################################################################### +$.datepicker._setTimeDatepicker = function(target, date, withDate) { + var inst = this._getInst(target), + tp_inst = this._get(inst, 'timepicker'); + + if (tp_inst) { + var tp_date; + if (date) { + if (typeof date == "string") { + tp_inst._parseTime(date, withDate); + tp_date = new Date(); + tp_date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second); + } + else tp_date = new Date(date.getTime()); + if (tp_date.toString() == 'Invalid Date') tp_date = undefined; + } + this._setTime(inst, tp_date); + } + +}; + +//####################################################################################### +// override setDate() to allow setting time too within Date object //####################################################################################### -$.datepicker._base_setDate = $.datepicker._setDate; -$.datepicker._setDate = function(inst, date, noChange) { - date = date || new Date(); - var tp_inst = $.datepicker._get(inst, 'timepicker'), - tp_date = new Date(date.getTime()); - - $.datepicker._updateDatepicker(inst); - $.datepicker._base_setDate(inst, date, noChange); - if (tp_inst) this._setTime(inst, tp_date); +$.datepicker._base_setDateDatepicker = $.datepicker._setDateDatepicker; +$.datepicker._setDateDatepicker = function(target, date) { + this._base_setDateDatepicker.apply(this, arguments); + this._setTimeDatepicker(target, date, true); }; //####################################################################################### // override getDate() to allow getting time too within Date object //####################################################################################### -$.datepicker._base_getDate = $.datepicker._getDate; -$.datepicker._getDate = function(inst) { - var tp_inst = $.datepicker._get(inst, 'timepicker'); +$.datepicker._base_getDateDatepicker = $.datepicker._getDateDatepicker; +$.datepicker._getDateDatepicker = function(target, noDefault) { + var inst = this._getInst(target), + tp_inst = this._get(inst, 'timepicker'); if (tp_inst) return (!inst.currentYear || (inst.input && inst.input.val() == '')) ? null : (new Date(inst.currentYear, inst.currentMonth, inst.currentDay, tp_inst.hour, tp_inst.minute, tp_inst.second)); - else return $.datepicker._base_getDate(inst); + else return this._base_getDateDatepicker(inst); }; - //####################################################################################### // jQuery extend now ignores nulls!