From 7a2cf46b9bad537e023c762f607864a43f37578e Mon Sep 17 00:00:00 2001 From: vhochstein Date: Thu, 16 Sep 2010 08:40:39 +0200 Subject: [PATCH 1/4] removed unused option --- jquery-ui-timepicker-addon.js | 1 - 1 file changed, 1 deletion(-) diff --git a/jquery-ui-timepicker-addon.js b/jquery-ui-timepicker-addon.js index 8e94503..3c746d0 100755 --- a/jquery-ui-timepicker-addon.js +++ b/jquery-ui-timepicker-addon.js @@ -29,7 +29,6 @@ secondText: 'Second' }; this.defaults = { // Global defaults for all the datetime picker instances - holdDatepickerOpen: true, showButtonPanel: true, timeOnly: false, showHour: true, From e59d034e79ee34b80ef32d0ee96eabc39cdd6d04 Mon Sep 17 00:00:00 2001 From: vhochstein Date: Thu, 16 Sep 2010 16:57:45 +0200 Subject: [PATCH 2/4] Bugfix: if nothing was selected by user do not update input field on close --- jquery-ui-timepicker-addon.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/jquery-ui-timepicker-addon.js b/jquery-ui-timepicker-addon.js index 3c746d0..6be5418 100755 --- a/jquery-ui-timepicker-addon.js +++ b/jquery-ui-timepicker-addon.js @@ -364,7 +364,9 @@ }; var onCloseFunc = function(dateText, inst) { - tp.updateDateTime(inst, tp); + if(tp.timeDefined === true) { + tp.updateDateTime(inst, tp); + } if ($.isFunction(opts.onClose)) { opts.onClose(dateText, inst); } From ff849fca3ccba5426004947ec8ee37b34ea566b9 Mon Sep 17 00:00:00 2001 From: vhochstein Date: Fri, 17 Sep 2010 16:48:03 +0200 Subject: [PATCH 3/4] use html attributes to offer input element specific configuration --- jquery-ui-timepicker-addon.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/jquery-ui-timepicker-addon.js b/jquery-ui-timepicker-addon.js index 6be5418..db42247 100755 --- a/jquery-ui-timepicker-addon.js +++ b/jquery-ui-timepicker-addon.js @@ -340,7 +340,21 @@ //######################################################################## jQuery.fn.datetimepicker = function(o) { var opts = (o === undefined ? {} : o); + var input = $(this); var tp = new Timepicker(); + var inlineSettings = {}; + + for (var attrName in tp.defaults) { + var attrValue = input.attr('time:' + attrName); + if (attrValue) { + try { + inlineSettings[attrName] = eval(attrValue); + } catch (err) { + inlineSettings[attrName] = attrValue; + } + } + } + tp.defaults = $.extend(tp.defaults, inlineSettings); var beforeShowFunc = function(input, inst) { tp.hour = tp.defaults.hour; From d80f9c773fd4cb90cfc7b1ca9775775d6b2de612 Mon Sep 17 00:00:00 2001 From: vhochstein Date: Wed, 1 Dec 2010 10:07:28 +0100 Subject: [PATCH 4/4] updated to version 0.9 --- jquery-ui-timepicker-addon.js | 1072 +++++++++++++++++++++------------ 1 file changed, 682 insertions(+), 390 deletions(-) mode change 100755 => 100644 jquery-ui-timepicker-addon.js diff --git a/jquery-ui-timepicker-addon.js b/jquery-ui-timepicker-addon.js old mode 100755 new mode 100644 index db42247..d1c46c9 --- a/jquery-ui-timepicker-addon.js +++ b/jquery-ui-timepicker-addon.js @@ -1,8 +1,8 @@ /* * jQuery timepicker addon * By: Trent Richardson [http://trentrichardson.com] -* Version 0.6 -* Last Modified: 9/15/2010 +* Version 0.9 +* Last Modified: 11/29/2010 * * Copyright 2010 Trent Richardson * Dual licensed under the MIT and GPL licenses. @@ -10,461 +10,753 @@ * http://trentrichardson.com/Impromptu/MIT-LICENSE.txt * * HERES THE CSS: -* #ui-timepicker-div dl{ text-align: left; } -* #ui-timepicker-div dl dt{ height: 25px; } -* #ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; } +* .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } +* .ui-timepicker-div dl{ text-align: left; } +* .ui-timepicker-div dl dt{ height: 25px; } +* .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; } +* .ui-timepicker-div td { font-size: 90%; } */ (function($) { - function Timepicker(singleton) { - if(typeof(singleton) === 'boolean' && singleton == true) { - this.regional = []; // Available regional settings, indexed by language code - this.regional[''] = { // Default regional settings - ampm: false, - timeFormat: 'hh:mm tt', - timeOnlyTitle: 'Choose Time', - timeText: 'Time', - hourText: 'Hour', - minuteText: 'Minute', - secondText: 'Second' - }; - this.defaults = { // Global defaults for all the datetime picker instances - showButtonPanel: true, - timeOnly: false, - showHour: true, - showMinute: true, - showSecond: false, - showTime: true, - stepHour: 0.05, - stepMinute: 0.05, - stepSecond: 0.05, - hour: 0, - minute: 0, - second: 0, - hourMin: 0, - minuteMin: 0, - secondMin: 0, - hourMax: 23, - minuteMax: 59, - secondMax: 59, - alwaysSetTime: true - }; - $.extend(this.defaults, this.regional['']); - } else { - this.defaults = $.extend({}, $.timepicker.defaults); - } - } - - Timepicker.prototype = { - $input: null, - $timeObj: null, - inst: null, - hour_slider: null, - minute_slider: null, - second_slider: null, +$.extend($.ui, { timepicker: { version: "0.9" } }); + +/* Time picker manager. + Use the singleton instance of this class, $.timepicker, to interact with the time picker. + Settings for (groups of) time pickers are maintained in an instance object, + allowing multiple different settings on the same page. */ + +function Timepicker() { + this.regional = []; // Available regional settings, indexed by language code + this.regional[''] = { // Default regional settings + currentText: 'Now', + closeText: 'Done', + ampm: false, + timeFormat: 'hh:mm tt', + timeOnlyTitle: 'Choose Time', + timeText: 'Time', + hourText: 'Hour', + minuteText: 'Minute', + secondText: 'Second' + }; + this._defaults = { // Global defaults for all the datetime picker instances + showButtonPanel: true, + timeOnly: false, + showHour: true, + showMinute: true, + showSecond: false, + showTime: true, + stepHour: 0.05, + stepMinute: 0.05, + stepSecond: 0.05, hour: 0, minute: 0, second: 0, - ampm: '', - formattedDate: '', - formattedTime: '', - formattedDateTime: '', - - //######################################################################## - // add our sliders to the calendar - //######################################################################## - addTimePicker: function(dp_inst) { - var tp_inst = this; - var currDT = this.$input.val(); - var regstr = this.defaults.timeFormat.toString() + hourMin: 0, + minuteMin: 0, + secondMin: 0, + hourMax: 23, + minuteMax: 59, + secondMax: 59, + hourGrid: 0, + minuteGrid: 0, + secondGrid: 0, + alwaysSetTime: true + }; + $.extend(this._defaults, this.regional['']); +} + +$.extend(Timepicker.prototype, { + $input: null, + $altInput: null, + $timeObj: null, + inst: null, + hour_slider: null, + minute_slider: null, + second_slider: null, + hour: 0, + minute: 0, + second: 0, + ampm: '', + 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 */ + setDefaults: function(settings) { + extendRemove(this._defaults, settings || {}); + return this; + }, + + //######################################################################## + // Create a new Timepicker instance + //######################################################################## + _newInst: function($input, o) { + var tp_inst = new Timepicker(), + inlineSettings = {}; + + for (var attrName in this._defaults) { + var attrValue = $input.attr('time:' + attrName); + if (attrValue) { + try { + inlineSettings[attrName] = eval(attrValue); + } catch (err) { + inlineSettings[attrName] = attrValue; + } + } + } + tp_inst._defaults = $.extend({}, this._defaults, inlineSettings, o, { + beforeShow: function(input, dp_inst) { + tp_inst.hour = tp_inst._defaults.hour; + tp_inst.minute = tp_inst._defaults.minute; + tp_inst.second = tp_inst._defaults.second; + tp_inst.ampm = ''; + tp_inst.$input = $(input); + if (o.altField) + tp_inst.$altInput = $($.datepicker._get(dp_inst, 'altField')) + .css({ cursor: 'pointer' }) + .focus(function(){ + $input.trigger("focus"); + }); + tp_inst.inst = dp_inst; + tp_inst._addTimePicker(); + if ($.isFunction(o.beforeShow)) + o.beforeShow(input, dp_inst); + }, + onChangeMonthYear: function(year, month, dp_inst) { + // Update the time as well : this prevents the time from disappearing from the $input field. + tp_inst._updateDateTime(dp_inst); + if ($.isFunction(o.onChangeMonthYear)) + o.onChangeMonthYear(year, month, dp_inst); + }, + onClose: function(dateText, dp_inst) { + if (tp_inst.timeDefined === true && $input.val() != '') + tp_inst._updateDateTime(dp_inst); + if ($.isFunction(o.onClose)) + o.onClose(dateText, dp_inst); + }, + timepicker: tp_inst // add timepicker as a property of datepicker: $.datepicker._get(dp_inst, 'timepicker'); + }); + return tp_inst; + }, + + //######################################################################## + // add our sliders to the calendar + //######################################################################## + _addTimePicker: function() { + var currDT = (this.$altInput) ? + this.$input.val() + ' ' + this.$altInput.val() : + this.$input.val(), + 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?') + '$'; + .replace(/\s/g, '\\s?') + '$', + + treg = timeString.match(new RegExp(regstr, 'i')), + order = this._getFormatPositions(); + + 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'); + regstr = '.{' + dp_dateFormat.length + ',}\\s+' + regstr; + } - if (!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(dp_inst, 'dateFormat'); - regstr = '.{' + dp_dateFormat.length + ',}\\s+' + regstr; + if (treg) { + if (order.t !== -1) + this.ampm = ((treg[order.t] === undefined || treg[order.t].length === 0) ? + '' : + (treg[order.t].charAt(0).toUpperCase() == 'A') ? 'AM' : 'PM').toUpperCase(); + + if (order.h !== -1) { + if (this.ampm == 'AM' && treg[order.h] == '12') + this.hour = 0; // 12am = 0 hour + else if (this.ampm == 'PM' && treg[order.h] != '12') + this.hour = (parseFloat(treg[order.h]) + 12).toFixed(0); // 12pm = 12 hour, any other pm = hour + 12 + else this.hour = treg[order.h]; } - var order = this.getFormatPositions(); - var treg = currDT.match(new RegExp(regstr, 'i')); + if (order.m !== -1) this.minute = treg[order.m]; + if (order.s !== -1) this.second = treg[order.s]; + } + }, - if (treg) { - if (order.t !== -1) { - this.ampm = ((treg[order.t] === undefined || treg[order.t].length === 0) ? '' : (treg[order.t].charAt(0).toUpperCase() == 'A') ? 'AM' : 'PM').toUpperCase(); - } + //######################################################################## + // figure out position of time elements.. cause js cant do named captures + //######################################################################## + _getFormatPositions: function() { + var finds = this._defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|t{1,2})/g), + orders = { h: -1, m: -1, s: -1, t: -1 }; - if (order.h !== -1) { - if (this.ampm == 'AM' && treg[order.h] == '12') { - // 12am = 0 hour - this.hour = 0; - } else if (this.ampm == 'PM' && treg[order.h] != '12') { - // 12pm = 12 hour, any other pm = hour + 12 - this.hour = (parseFloat(treg[order.h]) + 12).toFixed(0); - } else { - this.hour = treg[order.h]; + if (finds) + for (var i = 0; i < finds.length; i++) + if (orders[finds[i].toString().charAt(0)] == -1) + orders[finds[i].toString().charAt(0)] = i + 1; + + return orders; + }, + + //######################################################################## + // generate and inject html for timepicker into ui datepicker + //######################################################################## + _injectTimePicker: function() { + var $dp = this.inst.dpDiv, + o = this._defaults, + tp_inst = this, + // Added by Peter Medeiros: + // - Figure out what the hour/minute/second max should be based on the step values. + // - Example: if stepMinute is 15, then minMax is 45. + hourMax = o.hourMax - (o.hourMax % o.stepHour), + minMax = o.minuteMax - (o.minuteMax % o.stepMinute), + secMax = o.secondMax - (o.secondMax % o.stepSecond), + dp_id = this.inst.id.toString().replace(/([^A-Za-z0-9_])/g, ''); + + // Prevent displaying twice + if ($dp.find("div#ui-timepicker-div-"+ dp_id).length === 0) { + var noDisplay = ' style="display:none;"', + html = '
' + + '
' + o.timeText + '
' + + '
' + + '
' + o.hourText + '
', + hourGridSize = 0, + minuteGridSize = 0, + secondGridSize = 0, + size; + + if (o.showHour && o.hourGrid > 0) { + html += '
' + + '
' + + '
'; + + 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; + if (o.ampm) { + if (h == 0) tmph = 12 +'a'; + else if (h < 12) tmph += 'a'; + else tmph += 'p'; } + html += ''; } - if (order.m !== -1) { - this.minute = treg[order.m]; - } + html += '
' + tmph + '
' + + '
'; + } else html += '
'; - if (order.s !== -1) { - this.second = treg[order.s]; - } - } + html += '
' + o.minuteText + '
'; - tp_inst.timeDefined = (treg) ? true : false; - - if (typeof(dp_inst.stay_open) !== 'boolean' || dp_inst.stay_open === false) { - // wait for datepicker to create itself.. 60% of the time it works every time.. - setTimeout(function() { - tp_inst.injectTimePicker(dp_inst, tp_inst); - }, 10); - } else { - tp_inst.injectTimePicker(dp_inst, tp_inst); - } - - }, - - //######################################################################## - // figure out position of time elements.. cause js cant do named captures - //######################################################################## - getFormatPositions: function() { - var finds = this.defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|t{1,2})/g); - var orders = { h: -1, m: -1, s: -1, t: -1 }; - - if (finds) { - for (var i = 0; i < finds.length; i++) { - if (orders[finds[i].toString().charAt(0)] == -1) { - orders[finds[i].toString().charAt(0)] = i + 1; - } + if (o.showMinute && o.minuteGrid > 0) { + html += '
' + + '
' + + '
'; + + for (var m = o.minuteMin; m < minMax; m += o.minuteGrid) { + minuteGridSize++; + html += ''; } - } - return orders; - }, + html += '
' + ((m < 10) ? '0' : '') + m + '
' + + '
'; + } else html += '
'; - //######################################################################## - // generate and inject html for timepicker into ui datepicker - //######################################################################## - injectTimePicker: function(dp_inst, tp_inst) { - var $dp = $('#' + $.datepicker._mainDivId); - var opts = tp_inst.defaults; + html += '
' + o.secondText + '
'; - // Added by Peter Medeiros: - // - Figure out what the hour/minute/second max should be based on the step values. - // - Example: if stepMinute is 15, then minMax is 45. - var hourMax = opts.hourMax - (opts.hourMax % opts.stepHour); - var minMax = opts.minuteMax - (opts.minuteMax % opts.stepMinute); - var secMax = opts.secondMax - (opts.secondMax % opts.stepSecond); - - // Prevent displaying twice - if ($dp.find("div#ui-timepicker-div").length === 0) { - var noDisplay = ' style="display:none;"'; - var html = - '
' + - '
'+ opts.timeText +'
' + - '
' + - '
'+ opts.hourText +'
' + - '
' + - '
'+ opts.minuteText +'
' + - '
' + - '
'+ opts.secondText +'
' + - '
' + - '
'; - $tp = $(html); + if (o.showSecond && o.secondGrid > 0) { + html += '
' + + '
' + + '
'; - // if we only want time picker... - if (opts.timeOnly === true) { - $tp.prepend( - '
' + - '
'+ opts.timeOnlyTitle +'
' + - '
'); - $dp.find('.ui-datepicker-header, .ui-datepicker-calendar, .ui-datepicker-current').hide(); + for (var s = o.secondMin; s < secMax; s += o.secondGrid) { + secondGridSize++; + html += ''; } - tp_inst.hour_slider = $tp.find('#ui_tpicker_hour').slider({ - orientation: "horizontal", - value: tp_inst.hour, - min: opts.hourMin, - max: hourMax, - step: opts.stepHour, - slide: function(event, ui) { - tp_inst.hour_slider.slider( "option", "value", ui.value ); - tp_inst.onTimeChange(dp_inst, tp_inst); - } - }); + html += '
' + ((s < 10) ? '0' : '') + s + '
' + + '
'; + } else html += '
'; - // Updated by Peter Medeiros: - // - Pass in Event and UI instance into slide function - tp_inst.minute_slider = $tp.find('#ui_tpicker_minute').slider({ - orientation: "horizontal", - value: tp_inst.minute, - min: opts.minuteMin, - max: minMax, - step: opts.stepMinute, - slide: function(event, ui) { - // update the global minute slider instance value with the current slider value - tp_inst.minute_slider.slider( "option", "value", ui.value ); - tp_inst.onTimeChange(dp_inst, tp_inst); - } - }); + html += '
'; + $tp = $(html); - tp_inst.second_slider = $tp.find('#ui_tpicker_second').slider({ - orientation: "horizontal", - value: tp_inst.second, - min: opts.secondMin, - max: secMax, - step: opts.stepSecond, - slide: function(event, ui) { - tp_inst.second_slider.slider( "option", "value", ui.value ); - tp_inst.onTimeChange(dp_inst, tp_inst); - } - }); - - $dp.find('.ui-datepicker-calendar').after($tp); - tp_inst.$timeObj = $('#ui_tpicker_time'); + // if we only want time picker... + if (o.timeOnly === true) { + $tp.prepend( + '
' + + '
' + o.timeOnlyTitle + '
' + + '
'); + $dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide(); + } - if (dp_inst !== null) { - var timeDefined = tp_inst.timeDefined; - tp_inst.onTimeChange(dp_inst, tp_inst); - tp_inst.timeDefined = timeDefined; + this.hour_slider = $tp.find('#ui_tpicker_hour_'+ dp_id).slider({ + orientation: "horizontal", + value: this.hour, + min: o.hourMin, + max: hourMax, + step: o.stepHour, + slide: function(event, ui) { + tp_inst.hour_slider.slider( "option", "value", ui.value); + 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({ + orientation: "horizontal", + value: this.minute, + min: o.minuteMin, + max: minMax, + step: o.stepMinute, + slide: function(event, ui) { + // update the global minute slider instance value with the current slider value + tp_inst.minute_slider.slider( "option", "value", ui.value); + tp_inst._onTimeChange(); + } + }); + + this.second_slider = $tp.find('#ui_tpicker_second_'+ dp_id).slider({ + orientation: "horizontal", + value: this.second, + min: o.secondMin, + max: secMax, + step: o.stepSecond, + slide: function(event, ui) { + tp_inst.second_slider.slider( "option", "value", ui.value); + 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)) + "%", + borderCollapse: 'collapse' + }).find("td").each( function(index) { + $(this).click(function() { + var h = $(this).html(); + if(o.ampm) { + var ap = h.substring(2).toLowerCase(), + aph = parseInt(h.substring(0,2)); + if (ap == 'a') { + if (aph == 12) h = 0; + else h = aph; + } else if (aph == 12) h = 12; + else h = aph + 12; + } + tp_inst.hour_slider.slider("option", "value", h); + tp_inst._onTimeChange(); + }).css({ + cursor: 'pointer', + width: (100 / hourGridSize) + '%', + textAlign: 'center', + overflow: 'hidden' + }); + }); } - }, - - //######################################################################## - // when a slider moves.. - // on time change is also called when the time is updated in the text field - //######################################################################## - onTimeChange: function(dp_inst, tp_inst) { - var hour = tp_inst.hour_slider.slider('value'); - var minute = tp_inst.minute_slider.slider('value'); - var second = tp_inst.second_slider.slider('value'); - var ampm = (tp_inst.hour < 12) ? 'AM' : 'PM'; - var hasChanged = false; - - // 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 (tp_inst.hour != hour || tp_inst.minute != minute || tp_inst.second != second || (tp_inst.ampm.length > 0 && tp_inst.ampm != ampm)) { - hasChanged = true; + + if (o.showMinute && o.minuteGrid > 0) { + size = 100 * minuteGridSize * o.minuteGrid / (minMax - o.minuteMin); + $tp.find(".ui_tpicker_minute table").css({ + width: size + "%", + marginLeft: (size / (-2 * minuteGridSize)) + "%", + borderCollapse: 'collapse' + }).find("td").each(function(index) { + $(this).click(function() { + tp_inst.minute_slider.slider("option", "value", $(this).html()); + tp_inst._onTimeChange(); + }).css({ + cursor: 'pointer', + width: (100 / minuteGridSize) + '%', + textAlign: 'center', + overflow: 'hidden' + }); + }); } - tp_inst.hour = parseFloat(hour).toFixed(0); - tp_inst.minute = parseFloat(minute).toFixed(0); - tp_inst.second = parseFloat(second).toFixed(0); - tp_inst.ampm = ampm; + if (o.showSecond && o.secondGrid > 0) { + $tp.find(".ui_tpicker_second table").css({ + width: size + "%", + marginLeft: (size / (-2 * secondGridSize)) + "%", + borderCollapse: 'collapse' + }).find("td").each(function(index) { + $(this).click(function() { + tp_inst.second_slider.slider("option", "value", $(this).html()); + tp_inst._onTimeChange(); + }).css({ + cursor: 'pointer', + width: (100 / secondGridSize) + '%', + textAlign: 'center', + overflow: 'hidden' + }); + }); + } - tp_inst.formatTime(tp_inst); - tp_inst.$timeObj.text(tp_inst.formattedTime); + var $buttonPanel = $dp.find('.ui-datepicker-buttonpane'); + if ($buttonPanel.length) $buttonPanel.before($tp); + else $dp.append($tp); - if (hasChanged) { - tp_inst.updateDateTime(dp_inst, tp_inst); - tp_inst.timeDefined = true; - } - }, - - //######################################################################## - // format the time all pretty... - //######################################################################## - formatTime: function(inst) { - var tmptime = inst.defaults.timeFormat.toString(); - var hour12 = ((inst.ampm == 'AM') ? (inst.hour) : (inst.hour % 12)); - hour12 = (hour12 === 0) ? 12 : hour12; - - if (inst.defaults.ampm === true) { - tmptime = tmptime.toString() - .replace(/hh/g, ((hour12 < 10) ? '0' : '') + hour12) - .replace(/h/g, hour12) - .replace(/mm/g, ((inst.minute < 10) ? '0' : '') + inst.minute) - .replace(/m/g, inst.minute) - .replace(/ss/g, ((inst.second < 10) ? '0' : '') + inst.second) - .replace(/s/g, inst.second) - .replace(/TT/g, inst.ampm.toUpperCase()) - .replace(/tt/g, inst.ampm.toLowerCase()) - .replace(/T/g, inst.ampm.charAt(0).toUpperCase()) - .replace(/t/g, inst.ampm.charAt(0).toLowerCase()); - - } else { - tmptime = tmptime.toString() - .replace(/hh/g, ((inst.hour < 10) ? '0' : '') + inst.hour) - .replace(/h/g, inst.hour) - .replace(/mm/g, ((inst.minute < 10) ? '0' : '') + inst.minute) - .replace(/m/g, inst.minute) - .replace(/ss/g, ((inst.second < 10) ? '0' : '') + inst.second) - .replace(/s/g, inst.second); - tmptime = $.trim(tmptime.replace(/t/gi, '')); - } + this.$timeObj = $('#ui_tpicker_time_'+ dp_id); - inst.formattedTime = tmptime; - return inst.formattedTime; - }, - - //######################################################################## - // update our input with the new date time.. - //######################################################################## - updateDateTime: function(dp_inst, tp_inst) { - //var dt = this.$input.datepicker('getDate'); - var dt = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay); - var dateFmt = $.datepicker._get(dp_inst, 'dateFormat'); - var formatCfg = $.datepicker._getFormatConfig(dp_inst); - this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg); - var formattedDateTime = this.formattedDate; - var timeAvailable = dt !== null && tp_inst.timeDefined; - - if(this.defaults.timeOnly === true){ - formattedDateTime = this.formattedTime; - } - else if (this.defaults.timeOnly !== true && (this.defaults.alwaysSetTime || timeAvailable)) { - formattedDateTime += ' ' + this.formattedTime; + if (this.inst !== null) { + var timeDefined = this.timeDefined; + this._onTimeChange(); + this.timeDefined = timeDefined; } + } + }, - this.formattedDateTime = formattedDateTime; - this.$input.val(formattedDateTime); - }, - - setDefaults: function(settings) { - extendRemove(this.defaults, settings || {}); - return this; + //######################################################################## + // when a slider moves... + // on time change is also called when the time is updated in the text field + //######################################################################## + _onTimeChange: function(force) { + var hour = (this.hour_slider) ? this.hour_slider.slider('value') : this.hour, + minute = (this.minute_slider) ? this.minute_slider.slider('value') : this.minute, + second = (this.second_slider) ? this.second_slider.slider('value') : this.second, + 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)) + hasChanged = true; + + this.hour = parseFloat(hour).toFixed(0); + this.minute = parseFloat(minute).toFixed(0); + this.second = parseFloat(second).toFixed(0); + this.ampm = ampm; + + this._formatTime(); + if (this.$timeObj) this.$timeObj.text(this.formattedTime); + + if (hasChanged) { + this._updateDateTime(); + this.timeDefined = true; } - }; + }, //######################################################################## - // extend timepicker to datepicker - //######################################################################## - jQuery.fn.datetimepicker = function(o) { - var opts = (o === undefined ? {} : o); - var input = $(this); - var tp = new Timepicker(); - var inlineSettings = {}; - - for (var attrName in tp.defaults) { - var attrValue = input.attr('time:' + attrName); - if (attrValue) { - try { - inlineSettings[attrName] = eval(attrValue); - } catch (err) { - inlineSettings[attrName] = attrValue; - } - } + // format the time all pretty... + //######################################################################## + _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, ((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) + .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, ((time.hour < 10) ? '0' : '') + time.hour) + .replace(/h/g, time.hour) + .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); + tmptime = $.trim(tmptime.replace(/t/gi, '')); } - tp.defaults = $.extend(tp.defaults, inlineSettings); - - var beforeShowFunc = function(input, inst) { - tp.hour = tp.defaults.hour; - tp.minute = tp.defaults.minute; - tp.second = tp.defaults.second; - tp.ampm = ''; - tp.$input = $(input); - tp.inst = inst; - tp.addTimePicker(inst); - if ($.isFunction(opts.beforeShow)) { - opts.beforeShow(input, inst); - } - }; - var onChangeMonthYearFunc = function(year, month, inst) { - // Update the time as well : this prevents the time from disappearing from the input field. - tp.updateDateTime(inst, tp); - if ($.isFunction(opts.onChangeMonthYear)) { - opts.onChangeMonthYear(year, month, inst); - } - }; + if (arguments.length) return tmptime; + else this.formattedTime = tmptime; + }, - var onCloseFunc = function(dateText, inst) { - if(tp.timeDefined === true) { - tp.updateDateTime(inst, tp); - } - if ($.isFunction(opts.onClose)) { - opts.onClose(dateText, inst); - } - }; + //######################################################################## + // update our input with the new date time.. + //######################################################################## + _updateDateTime: function() { + var dp_inst = this.inst, + dt = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay), + dateFmt = $.datepicker._get(dp_inst, 'dateFormat'), + formatCfg = $.datepicker._getFormatConfig(dp_inst), + 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; + + if (this._defaults.timeOnly === true) formattedDateTime = this.formattedTime; + else if (this._defaults.timeOnly !== true && (this._defaults.alwaysSetTime || timeAvailable)) { + if (this.$altInput) this.$altInput.val(this.formattedTime); + else formattedDateTime += ' ' + this.formattedTime; + } - tp.defaults = $.extend({}, tp.defaults, opts, { - beforeShow: beforeShowFunc, - onChangeMonthYear: onChangeMonthYearFunc, - onClose: onCloseFunc - }); + this.formattedDateTime = formattedDateTime; + this.$input.val(formattedDateTime).trigger("change"); + } - $(this).datepicker(tp.defaults); - }; +}); +$.fn.extend({ //######################################################################## // shorthand just to use timepicker.. //######################################################################## - jQuery.fn.timepicker = function(opts) { - opts = $.extend(opts, { timeOnly: true }); - $(this).datetimepicker(opts); - }; + 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); + }); + }, //######################################################################## - // the bad hack :/ override datepicker so it doesnt close on select - // inspired: http://stackoverflow.com/questions/1252512/jquery-datepicker-prevent-closing-picker-when-clicking-a-date/1762378#1762378 + // extend timepicker to datepicker //######################################################################## - $.datepicker._selectDateOverload = $.datepicker._selectDate; - $.datepicker._selectDate = function (id, dateStr) { - var target = $(id); - var inst = this._getInst(target[0]); - inst.inline = true; - inst.stay_open = true; - $.datepicker._selectDateOverload(id, dateStr); - inst.stay_open = false; - inst.inline = false; + 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); + else + return this.each(function() { + $.fn.datepicker.apply($(this), tmp_args); + }); + } + else + return this.each(function() { + $(this).datepicker($.timepicker._newInst($input, o)._defaults); + }); + } +}); + +//######################################################################## +// the bad hack :/ override datepicker so it doesnt close on select +// inspired: http://stackoverflow.com/questions/1252512/jquery-datepicker-prevent-closing-picker-when-clicking-a-date/1762378#1762378 +//######################################################################## +$.datepicker._base_selectDate = $.datepicker._selectDate; +$.datepicker._selectDate = function (id, dateStr) { + var inst = this._getInst($(id)[0]), + tp_inst = this._get(inst, 'timepicker'); + + if (tp_inst) { + inst.inline = inst.stay_open = true; + this._base_selectDate(id, dateStr); + inst.inline = inst.stay_open = false; this._notifyChange(inst); this._updateDatepicker(inst); - }; + } + else this._base_selectDate(id, dateStr); +}; - $.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker; - //############################################################################################# - // second bad hack :/ override datepicker so it triggers an event when changing the input field - // and does not redraw the datepicker on every selectDate event - //############################################################################################# - // Generate the date picker content. - $.datepicker._updateDatepicker = function(inst) { - if (typeof(inst.stay_open) !== 'boolean' || inst.stay_open === false) { - this._base_updateDatepicker(inst); - // Reload the time control when changing something in the input text field. - this._beforeShow(inst.input, inst); - } - }; +//############################################################################################# +// second bad hack :/ override datepicker so it triggers an event when changing the input field +// and does not redraw the datepicker on every selectDate event +//############################################################################################# +$.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker; +$.datepicker._updateDatepicker = function(inst) { + if (typeof(inst.stay_open) !== 'boolean' || inst.stay_open === false) { + this._base_updateDatepicker(inst); + // Reload the time control when changing something in the input text field. + this._beforeShow(inst.input, inst); + } +}; - $.datepicker._beforeShow = function(input, inst) { - var beforeShow = this._get(inst, 'beforeShow'); - if (beforeShow) { - inst.stay_open = true; - beforeShow.apply((inst.input ? inst.input[0] : null), [inst.input, inst]); - inst.stay_open = false; - } - }; +$.datepicker._beforeShow = function(input, inst) { + var beforeShow = this._get(inst, 'beforeShow'); + if (beforeShow) { + inst.stay_open = true; + beforeShow.apply((inst.input ? inst.input[0] : null), [inst.input, inst]); + inst.stay_open = false; + } +}; + +//####################################################################################### +// third bad hack :/ override datepicker so it allows spaces and colan in the input field +//####################################################################################### +$.datepicker._base_doKeyPress = $.datepicker._doKeyPress; +$.datepicker._doKeyPress = function(event) { + var inst = $.datepicker._getInst(event.target), + tp_inst = $.datepicker._get(inst, 'timepicker'); - //####################################################################################### - // third bad hack :/ override datepicker so it allows spaces and colan in the input field - //####################################################################################### - $.datepicker._doKeyPress = function(event) { - var inst = $.datepicker._getInst(event.target); + if (tp_inst) { if ($.datepicker._get(inst, 'constrainInput')) { - var dateChars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat')); - var chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode); - // keyCode == 58 => ":" - // keyCode == 32 => " " - return event.ctrlKey || (chr < ' ' || !dateChars || dateChars.indexOf(chr) > -1 || event.keyCode == 58 || event.keyCode == 32); + 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); + +}; + +//####################################################################################### +// Override key up event to sync manual input changes. +//####################################################################################### +$.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 { + $.datepicker._updateDatepicker(inst); + } + catch (err) { + $.datepicker.log(err); + } + } + } + + return $.datepicker._base_doKeyUp(event); +}; + +//####################################################################################### +// override "Today" button to also grab the time. +//####################################################################################### +$.datepicker._base_gotoToday = $.datepicker._gotoToday; +$.datepicker._gotoToday = function(id) { + this._base_gotoToday(id); + this._setTime(this._getInst($(id)[0]), new Date()); +}; + +//####################################################################################### +// Create our own set time function +//####################################################################################### +$.datepicker._setTime = function(inst, date) { + var tp_inst = this._get(inst, 'timepicker'); + + if (tp_inst) { + 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 < 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.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); + } +}; + +//####################################################################################### +// 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_setDateDatepicker = $.datepicker._setDateDatepicker; +$.datepicker._setDateDatepicker = function(target, date) { + var inst = this._getInst(target), + tp_date = new Date(date.getTime()); -/* jQuery extend now ignores nulls! */ + this._updateDatepicker(inst); + this._base_setDateDatepicker.apply(this, arguments); + this._setTimeDatepicker(target, tp_date, true); +}; + +//####################################################################################### +// override getDate() to allow getting time too within Date object +//####################################################################################### +$.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 this._base_getDateDatepicker(inst); +}; + +//####################################################################################### +// jQuery extend now ignores nulls! +//####################################################################################### function extendRemove(target, props) { $.extend(target, props); for (var name in props) - if (props[name] == null || props[name] == undefined) + if (props[name] === null || props[name] === undefined) target[name] = props[name]; return target; -}; +} + +$.timepicker = new Timepicker(); // singleton instance +$.timepicker.version = "0.9"; -$.timepicker = new Timepicker(true); // singleton instance })(jQuery);