-$('#timezone_example_3').datetimepicker({
-	timeFormat: 'HH:mm z',
-	timezone: 'MT',
-	timezoneList: [ 
-			{ value: 'ET', label: 'Eastern'}, 
-			{ value: 'CT', label: 'Central' }, 
-			{ value: 'MT', label: 'Mountain' }, 
-			{ value: 'PT', label: 'Pacific' } 
-		]
-});
-
 

-

Adding a Timepicker to jQuery UI Datepicker

- +

Adding a Timepicker to jQuery UI Datepicker

+

The timepicker addon adds a timepicker to jQuery UI Datepicker, thus the datepicker and slider components (jQueryUI) are required for using any of these. In addition all datepicker options are still available through the timepicker addon.

- +

If you are interested in contributing to Timepicker Addon please check it out on GitHub. If you do make additions please keep in mind I enjoy tabs over spaces,.. But contributions are welcome in any form.

- +

Back to Blog or Follow on Twitter

- - Try my new app to keep you informed of your car's financing status and value.

Donation

Has this Timepicker Addon been helpful to you?

@@ -72,4 +70,4 @@

Donation

Formatting

Localization

Examples

- \ No newline at end of file + diff --git a/src/i18n/jquery-ui-timepicker-el.js b/src/i18n/jquery-ui-timepicker-el.js index 1fe9b0e..72aec6d 100644 --- a/src/i18n/jquery-ui-timepicker-el.js +++ b/src/i18n/jquery-ui-timepicker-el.js @@ -7,8 +7,8 @@ hourText: 'Ώρες', minuteText: 'Λεπτά', secondText: 'Δευτερόλεπτα', - millisecText: 'μιλιδευτερόλεπτο', - microsecText: 'Microseconds', + millisecText: 'Χιλιοστοδευτερόλεπτα', + microsecText: 'Μικροδευτερόλεπτα', timezoneText: 'Ζώνη ώρας', currentText: 'Τώρα', closeText: 'Κλείσιμο', @@ -19,4 +19,4 @@ isRTL: false }; $.timepicker.setDefaults($.timepicker.regional['el']); -})(jQuery); +})(jQuery); \ No newline at end of file diff --git a/src/i18n/jquery-ui-timepicker-sq.js b/src/i18n/jquery-ui-timepicker-sq.js new file mode 100644 index 0000000..d93d88c --- /dev/null +++ b/src/i18n/jquery-ui-timepicker-sq.js @@ -0,0 +1,22 @@ +/* Albanian translation for the jQuery Timepicker Addon */ +/* Written by Olti Buzi */ +(function($) { + $.timepicker.regional['sq'] = { + timeOnlyTitle: 'Zgjidh orarin', + timeText: 'Orari', + hourText: 'Ora', + minuteText: 'Minuta', + secondText: 'Sekonda', + millisecText: 'Minisekonda', + microsecText: 'Mikrosekonda', + timezoneText: 'Zona kohore', + currentText: 'Tani', + closeText: 'Mbyll', + timeFormat: 'HH:mm', + timeSuffix: '', + amNames: ['m.', 'AM', 'A'], + pmNames: ['p.', 'PM', 'P'], + isRTL: false + }; + $.timepicker.setDefaults($.timepicker.regional['sq']); +})(jQuery); \ No newline at end of file diff --git a/src/jquery-ui-timepicker-addon.js b/src/jquery-ui-timepicker-addon.js index 79de1e3..9bbb21f 100644 --- a/src/jquery-ui-timepicker-addon.js +++ b/src/jquery-ui-timepicker-addon.js @@ -32,7 +32,7 @@ } }); - /* + /* * Timepicker 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, @@ -159,7 +159,7 @@ support: {}, control: null, - /* + /* * Override the default settings for all instances of the time picker. * @param {Object} settings object - the new settings to use as defaults (anonymous object) * @return {Object} the manager object @@ -232,7 +232,7 @@ // detect which units are supported tp_inst.support = detectSupport( - tp_inst._defaults.timeFormat + + tp_inst._defaults.timeFormat + (tp_inst._defaults.pickerTimeFormat ? tp_inst._defaults.pickerTimeFormat : '') + (tp_inst._defaults.altTimeFormat ? tp_inst._defaults.altTimeFormat : '')); @@ -431,7 +431,7 @@ } html += ''; } - + // Timezone var showTz = o.showTimezone !== null ? o.showTimezone : this.support.timezone; html += '

' + o.timezoneText + '

'; @@ -446,7 +446,7 @@ $tp.prepend(''); $dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide(); } - + // add sliders, adjust grids, add events for (i = 0, l = tp_inst.units.length; i < l; i++) { litem = tp_inst.units[i]; @@ -481,7 +481,7 @@ } } } - + tp_inst.control.value(tp_inst, tp_inst[f + '_slider'], litem, n); tp_inst._onTimeChange(); @@ -521,7 +521,7 @@ tp_inst._afterInject(); }); // End timezone options - + // inject timepicker into datepicker var $buttonPanel = $dp.find('.ui-datepicker-buttonpane'); if ($buttonPanel.length) { @@ -557,7 +557,7 @@ var sliderAccessArgs = this._defaults.sliderAccessArgs, rtl = this._defaults.isRTL; sliderAccessArgs.isRTL = rtl; - + setTimeout(function () { // fix for inline mode if ($tp.find('.ui-slider-access').length === 0) { $tp.find('.ui-slider:visible').sliderAccess(sliderAccessArgs); @@ -709,44 +709,44 @@ } } - if (dp_inst.settings.minTime!==null) { - var tempMinTime=new Date("01/01/1970 " + dp_inst.settings.minTime); + if (dp_inst.settings.minTime!==null) { + var tempMinTime=new Date("01/01/1970 " + dp_inst.settings.minTime); if (this.hourtempMaxTime.getHours()) { - this.hour=this._defaults.hourMax=tempMaxTime.getHours(); + this.hour=this._defaults.hourMax=tempMaxTime.getHours(); + this.minute=this._defaults.minuteMax=tempMaxTime.getMinutes(); + } else if (this.hour===tempMaxTime.getHours() && this.minute>tempMaxTime.getMinutes()) { this.minute=this._defaults.minuteMax=tempMaxTime.getMinutes(); - } else if (this.hour===tempMaxTime.getHours() && this.minute>tempMaxTime.getMinutes()) { - this.minute=this._defaults.minuteMax=tempMaxTime.getMinutes(); } else { if (this._defaults.hourMax>tempMaxTime.getHours()) { this._defaults.hourMax=tempMaxTime.getHours(); - this._defaults.minuteMax=tempMaxTime.getMinutes(); + this._defaults.minuteMax=tempMaxTime.getMinutes(); } else if (this._defaults.hourMax===tempMaxTime.getHours()===this.hour && this._defaults.minuteMax>tempMaxTime.getMinutes()) { - this._defaults.minuteMax=tempMaxTime.getMinutes(); + this._defaults.minuteMax=tempMaxTime.getMinutes(); } else { this._defaults.minuteMax=59; } - } + } } - + if (adjustSliders !== undefined && adjustSliders === true) { var hourMax = parseInt((this._defaults.hourMax - ((this._defaults.hourMax - this._defaults.hourMin) % this._defaults.stepHour)), 10), minMax = parseInt((this._defaults.minuteMax - ((this._defaults.minuteMax - this._defaults.minuteMin) % this._defaults.stepMinute)), 10), @@ -840,11 +840,11 @@ // If the update was done using the sliders, update the input field. var hasChanged = ( hour !== parseInt(this.hour,10) || // sliders should all be numeric - minute !== parseInt(this.minute,10) || - second !== parseInt(this.second,10) || - millisec !== parseInt(this.millisec,10) || - microsec !== parseInt(this.microsec,10) || - (this.ampm.length > 0 && (hour < 12) !== ($.inArray(this.ampm.toUpperCase(), this.amNames) !== -1)) || + minute !== parseInt(this.minute,10) || + second !== parseInt(this.second,10) || + millisec !== parseInt(this.millisec,10) || + microsec !== parseInt(this.microsec,10) || + (this.ampm.length > 0 && (hour < 12) !== ($.inArray(this.ampm.toUpperCase(), this.amNames) !== -1)) || (this.timezone !== null && timezone !== this.timezone.toString()) // could be numeric or "EST" format, so use toString() ); @@ -882,15 +882,17 @@ // Updates the time within the timepicker this.formattedTime = $.datepicker.formatTime(o.timeFormat, this, o); if (this.$timeObj) { - var sPos = this.$timeObj[0].selectionStart; - var ePos = this.$timeObj[0].selectionEnd; if (pickerTimeFormat === o.timeFormat) { this.$timeObj.val(this.formattedTime + pickerTimeSuffix); } else { this.$timeObj.val($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix); } - this.$timeObj[0].setSelectionRange(sPos, ePos); + if (this.$timeObj[0].setSelectionRange) { + var sPos = this.$timeObj[0].selectionStart; + var ePos = this.$timeObj[0].selectionEnd; + this.$timeObj[0].setSelectionRange(sPos, ePos); + } } this.timeDefined = true; @@ -917,8 +919,8 @@ */ _updateDateTime: function (dp_inst) { dp_inst = this.inst || dp_inst; - var dtTmp = (dp_inst.currentYear > 0? - new Date(dp_inst.currentYear, dp_inst.currentMonth, dp_inst.currentDay) : + var dtTmp = (dp_inst.currentYear > 0? + new Date(dp_inst.currentYear, dp_inst.currentMonth, dp_inst.currentDay) : new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay)), dt = $.datepicker._daylightSavingAdjust(dtTmp), //dt = $.datepicker._daylightSavingAdjust(new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay)), @@ -928,7 +930,7 @@ timeAvailable = dt !== null && this.timeDefined; this.formattedDate = $.datepicker.formatDate(dateFmt, (dt === null ? new Date() : dt), formatCfg); var formattedDateTime = this.formattedDate; - + // if a slider was changed but datepicker doesn't have a value yet, set it if (dp_inst.lastVal === "") { dp_inst.currentYear = dp_inst.selectedYear; @@ -938,7 +940,7 @@ /* * remove following lines to force every changes in date picker to change the input value - * Bug descriptions: when an input field has a default value, and click on the field to pop up the date picker. + * Bug descriptions: when an input field has a default value, and click on the field to pop up the date picker. * If the user manually empty the value in the input field, the date picker will never change selected value. */ //if (dp_inst.lastVal !== undefined && (dp_inst.lastVal.length > 0 && this.$input.val().length === 0)) { @@ -963,7 +965,7 @@ var altFormattedDateTime = '', altSeparator = this._defaults.altSeparator !== null ? this._defaults.altSeparator : this._defaults.separator, altTimeSuffix = this._defaults.altTimeSuffix !== null ? this._defaults.altTimeSuffix : this._defaults.timeSuffix; - + if (!this._defaults.timeOnly) { if (this._defaults.altFormat) { altFormattedDateTime = $.datepicker.formatDate(this._defaults.altFormat, (dt === null ? new Date() : dt), formatCfg); @@ -1030,7 +1032,7 @@ stop: function (event, ui) { tp_inst._onSelectHandler(); } - }); + }); }, options: function (tp_inst, obj, unit, opts, val) { if (tp_inst._defaults.isRTL) { @@ -1043,7 +1045,7 @@ } return obj.slider(opts); } - var min = opts.min, + var min = opts.min, max = opts.max; opts.min = opts.max = null; if (min !== undefined) { @@ -1106,7 +1108,7 @@ if (val === undefined) { return $t.data(opts); } - o[opts] = val; + o[opts] = val; } else { o = opts; } return tp_inst.control.create(tp_inst, obj, $t.data('unit'), $t.val(), o.min>=0 ? o.min : $t.data('min'), o.max || $t.data('max'), o.step || $t.data('step')); @@ -1341,11 +1343,11 @@ } catch (err2) { $.timepicker.log("Unable to parse \ntimeString: " + s + "\ntimeFormat: " + f); - } + } } return false; }; // end looseParse - + if (typeof o.parse === "function") { return o.parse(timeFormat, timeString, o); } @@ -1494,11 +1496,11 @@ .replace(/tT/g, ampm ? 'AaPpMm' : '') .replace(/T/g, ampm ? 'AP' : '') .replace(/tt/g, ampm ? 'apm' : '') - .replace(/t/g, ampm ? 'ap' : '') + - " " + tp_inst._defaults.separator + - tp_inst._defaults.timeSuffix + - (tz ? tp_inst._defaults.timezoneList.join('') : '') + - (tp_inst._defaults.amNames.join('')) + (tp_inst._defaults.pmNames.join('')) + + .replace(/t/g, ampm ? 'ap' : '') + + " " + tp_inst._defaults.separator + + tp_inst._defaults.timeSuffix + + (tz ? tp_inst._defaults.timezoneList.join('') : '') + + (tp_inst._defaults.amNames.join('')) + (tp_inst._defaults.pmNames.join('')) + dateChars, chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode); return event.ctrlKey || (chr < ' ' || !dateChars || datetimeChars.indexOf(chr) > -1); @@ -1521,11 +1523,11 @@ var altFormat = tp_inst._defaults.altFormat || tp_inst._defaults.dateFormat, date = this._getDate(inst), formatCfg = $.datepicker._getFormatConfig(inst), - altFormattedDateTime = '', - altSeparator = tp_inst._defaults.altSeparator ? tp_inst._defaults.altSeparator : tp_inst._defaults.separator, + altFormattedDateTime = '', + altSeparator = tp_inst._defaults.altSeparator ? tp_inst._defaults.altSeparator : tp_inst._defaults.separator, altTimeSuffix = tp_inst._defaults.altTimeSuffix ? tp_inst._defaults.altTimeSuffix : tp_inst._defaults.timeSuffix, altTimeFormat = tp_inst._defaults.altTimeFormat !== null ? tp_inst._defaults.altTimeFormat : tp_inst._defaults.timeFormat; - + altFormattedDateTime += $.datepicker.formatTime(altTimeFormat, tp_inst, tp_inst._defaults) + altTimeSuffix; if (!tp_inst._defaults.timeOnly && !tp_inst._defaults.altFieldTimeOnly && date !== null) { if (tp_inst._defaults.altFormat) { @@ -1539,7 +1541,7 @@ } } else { - $.datepicker._base_updateAlternate(inst); + $.datepicker._base_updateAlternate(inst); } }; @@ -1572,9 +1574,13 @@ var inst = this._getInst($(id)[0]); this._base_gotoToday(id); var tp_inst = this._get(inst, 'timepicker'); + if (!tp_inst) { + return; + } + var tzoffset = $.timepicker.timezoneOffsetNumber(tp_inst.timezone); var now = new Date(); - now.setMinutes(now.getMinutes() + now.getTimezoneOffset() + tzoffset); + now.setMinutes(now.getMinutes() + now.getTimezoneOffset() + parseInt(tzoffset, 10)); this._setTime(inst, now); this._setDate(inst, now); tp_inst._onSelectHandler(); @@ -1629,7 +1635,7 @@ tp_inst.millisec = date ? date.getMilliseconds() : defaults.millisec; tp_inst.microsec = date ? date.getMicroseconds() : defaults.microsec; - //check if within min/max times.. + //check if within min/max times.. tp_inst._limitMinMaxDateTime(inst, true); tp_inst._onTimeChange(); @@ -1697,9 +1703,9 @@ } else { tp_date = date; } - - // This is important if you are using the timezone option, javascript's Date - // object will only return the timezone offset for the current locale, so we + + // This is important if you are using the timezone option, javascript's Date + // object will only return the timezone offset for the current locale, so we // adjust it accordingly. If not using timezone option this won't matter.. // If a timezone is different in tp, keep the timezone as is if (tp_inst && tp_date) { @@ -1707,8 +1713,8 @@ if (!tp_inst.support.timezone && tp_inst._defaults.timezone === null) { tp_inst.timezone = tp_date.getTimezoneOffset() * -1; } - date = $.timepicker.timezoneAdjust(date, tp_inst.timezone); - tp_date = $.timepicker.timezoneAdjust(tp_date, tp_inst.timezone); + date = $.timepicker.timezoneAdjust(date, $.timepicker.timezoneOffsetString(-date.getTimezoneOffset()), tp_inst.timezone); + tp_date = $.timepicker.timezoneAdjust(tp_date, $.timepicker.timezoneOffsetString(-tp_date.getTimezoneOffset()), tp_inst.timezone); } this._updateDatepicker(inst); @@ -1735,20 +1741,39 @@ } var date = this._getDate(inst); - var currDT = $.trim((tp_inst.$altInput && tp_inst._defaults.altFieldTimeOnly) ? tp_inst.$input.val() + ' ' + tp_inst.$altInput.val() : tp_inst.$input.val()); + + var currDT = null; + + if (tp_inst.$altInput && tp_inst._defaults.altFieldTimeOnly) { + currDT = tp_inst.$input.val() + ' ' + tp_inst.$altInput.val(); + } + else if (tp_inst.$input.get(0).tagName !== 'INPUT' && tp_inst.$altInput) { + /** + * in case the datetimepicker has been applied to a non-input tag for inline UI, + * and the user has not configured the plugin to display only time in altInput, + * pick current date time from the altInput (and hope for the best, for now, until "ER1" is applied) + * + * @todo ER1. Since altInput can have a totally difference format, convert it to standard format by reading input format from "altFormat" and "altTimeFormat" option values + */ + currDT = tp_inst.$altInput.val(); + } + else { + currDT = tp_inst.$input.val(); + } + if (date && tp_inst._parseTime(currDT, !inst.settings.timeOnly)) { date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second, tp_inst.millisec); date.setMicroseconds(tp_inst.microsec); - // This is important if you are using the timezone option, javascript's Date - // object will only return the timezone offset for the current locale, so we + // This is important if you are using the timezone option, javascript's Date + // object will only return the timezone offset for the current locale, so we // adjust it accordingly. If not using timezone option this won't matter.. if (tp_inst.timezone != null) { // look out for DST if tz wasn't specified if (!tp_inst.support.timezone && tp_inst._defaults.timezone === null) { tp_inst.timezone = date.getTimezoneOffset() * -1; } - date = $.timepicker.timezoneAdjust(date, tp_inst.timezone); + date = $.timepicker.timezoneAdjust(date, tp_inst.timezone, $.timepicker.timezoneOffsetString(-date.getTimezoneOffset())); } } return date; @@ -1872,8 +1897,8 @@ tp_inst._defaults.onSelect = onselect; } - // Datepicker will override our date when we call _base_optionDatepicker when - // calling minDate/maxDate, so we will first grab the value, call + // Datepicker will override our date when we call _base_optionDatepicker when + // calling minDate/maxDate, so we will first grab the value, call // _base_optionDatepicker, then set our value back. if(min || max){ $target = $(target); @@ -1888,7 +1913,7 @@ } return this._base_optionDatepicker.call($.datepicker, target, name_clone || name, value); }; - + /* * jQuery isEmptyObject does not check hasOwnProperty - if someone has added to the object prototype, * it will return false for all objects @@ -2046,7 +2071,7 @@ hours = (off - minutes) / 60, iso = iso8601 ? ':' : '', tz = (off >= 0 ? '+' : '-') + ('0' + Math.abs(hours)).slice(-2) + iso + ('0' + Math.abs(minutes)).slice(-2); - + if (tz === '+00:00') { return 'Z'; } @@ -2066,7 +2091,7 @@ } if (!/^(\-|\+)\d{4}$/.test(normalized)) { // possibly a user defined tz, so just give it back - return tzString; + return parseInt(tzString, 10); } return ((normalized.substr(0, 1) === '-' ? -1 : 1) * // plus or minus @@ -2077,13 +2102,15 @@ /** * No way to set timezone in js Date, so we must adjust the minutes to compensate. (think setDate, getDate) * @param {Date} date + * @param {string} fromTimezone formatted like "+0500", "-1245" * @param {string} toTimezone formatted like "+0500", "-1245" * @return {Date} */ - $.timepicker.timezoneAdjust = function (date, toTimezone) { + $.timepicker.timezoneAdjust = function (date, fromTimezone, toTimezone) { + var fromTz = $.timepicker.timezoneOffsetNumber(fromTimezone); var toTz = $.timepicker.timezoneOffsetNumber(toTimezone); if (!isNaN(toTz)) { - date.setMinutes(date.getMinutes() + -date.getTimezoneOffset() - toTz); + date.setMinutes(date.getMinutes() + (-fromTz) - (-toTz)); } return date; }; @@ -2190,7 +2217,7 @@ date.setMilliseconds(date.getMilliseconds() - options.minInterval); } } - + if (date.getTime) { other[method].call(other, 'option', option, date); } @@ -2216,7 +2243,7 @@ }, options, options.end)); checkDates(startTime, endTime); - + selected(startTime, endTime, 'minDate'); selected(endTime, startTime, 'maxDate'); @@ -2229,7 +2256,8 @@ * @return {void} */ $.timepicker.log = function () { - if (window.console) { + // Older IE (9, maybe 10) throw error on accessing `window.console.log.apply`, so check first. + if (window.console && window.console.log && window.console.log.apply) { window.console.log.apply(window.console, Array.prototype.slice.call(arguments)); } };