-

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?

@@ -73,6 +71,7 @@

Donation

Localization

Examples

+ @@ -113,9 +112,9 @@

Requirements

Version

-

Version 1.5.5

+

Version 1.6.3

-

Last updated on 2015-05-24

+

Last updated on 2016-04-20

jQuery Timepicker Addon is currently available for use in all personal or commercial projects under the MIT license.

MIT License

@@ -325,7 +324,10 @@

Other Options

showButtonPanel

Default: true - Whether to show the button panel at the bottom. This is generally needed.

- + +

timeInput

+

Default: false - Allows direct input in time field

+

timeOnly

Default: false - Hide the datepicker and only provide a time interface.

@@ -517,6 +519,7 @@

Examples

Using Timezones

Slider Modifications

Alternate Fields

+

Time Input

Time Restraints

Time Ranges

Utilities

@@ -605,27 +608,6 @@

Using Timezones

{ value: -480, label: 'Pacific' } ] }); - -

-$('#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' } 
-		]
-});
-
 

+$('#input_example_1').datetimepicker({
+	timeInput: true,
+	timeFormat: "hh:mm tt"
+});
+

+$('#input_example_2').datetimepicker({
+	timeInput: true,
+	timeFormat: "hh:mm tt",
+	showHour: false,
+	showMinute: false
+});
 

-$('#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' } 
-		]
-});
-
 

+$('#input_example_1').datetimepicker({
+	timeInput: true,
+	timeFormat: "hh:mm tt"
+});
+

+$('#input_example_2').datetimepicker({
+	timeInput: true,
+	timeFormat: "hh:mm tt",
+	showHour: false,
+	showMinute: false
+});
 

-

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/docs/options.html b/src/docs/options.html index 0754fb0..06201ce 100644 --- a/src/docs/options.html +++ b/src/docs/options.html @@ -202,7 +202,10 @@

Other Options

showButtonPanel

Default: true - Whether to show the button panel at the bottom. This is generally needed.

- + +

timeInput

+

Default: false - Allows direct input in time field

+

timeOnly

Default: false - Hide the datepicker and only provide a time interface.

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-mk.js b/src/i18n/jquery-ui-timepicker-mk.js new file mode 100644 index 0000000..9857e01 --- /dev/null +++ b/src/i18n/jquery-ui-timepicker-mk.js @@ -0,0 +1,22 @@ +/* Macedonian cyrilic translation for the jQuery Timepicker Addon */ +/* Written by Vlatko Ristovski */ +(function($) { + $.timepicker.regional['mk'] = { + timeOnlyTitle: 'Одберете време', + timeText: 'Време', + hourText: 'Час', + minuteText: 'Минути', + secondText: 'Секунди', + millisecText: 'Милисекунди', + microsecText: 'Микросекунди', + timezoneText: 'Временска зона', + currentText: 'Сега', + closeText: 'Затвори', + timeFormat: 'HH:mm', + timeSuffix: '', + amNames: ['AM', 'A'], + pmNames: ['PM', 'P'], + isRTL: false + }; + $.timepicker.setDefaults($.timepicker.regional['mk']); +})(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.css b/src/jquery-ui-timepicker-addon.css index 2d9e031..586a7f0 100644 --- a/src/jquery-ui-timepicker-addon.css +++ b/src/jquery-ui-timepicker-addon.css @@ -6,6 +6,9 @@ .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; } .ui-timepicker-div .ui_tpicker_unit_hide{ display: none; } +.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; } +.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; } + .ui-timepicker-rtl{ direction: rtl; } .ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; } .ui-timepicker-rtl dl dt{ float: right; clear: right; } diff --git a/src/jquery-ui-timepicker-addon.js b/src/jquery-ui-timepicker-addon.js index a9bc63e..9bbb21f 100644 --- a/src/jquery-ui-timepicker-addon.js +++ b/src/jquery-ui-timepicker-addon.js @@ -9,7 +9,7 @@ (function (factory) { if (typeof define === 'function' && define.amd) { - define(['jquery', 'jquery.ui'], factory); + define(['jquery', 'jquery-ui'], factory); } else { factory(jQuery); } @@ -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 : '')); @@ -393,7 +393,7 @@ if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) { var noDisplay = ' ui_tpicker_unit_hide', html = '

' + '

' + o.timeText + '

' + - '

'; + '

'; // Create the markup for (i = 0, l = this.units.length; i < l; i++) { @@ -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('

' + '

' + o.timeOnlyTitle + '

' + '

'); $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) { @@ -530,7 +530,21 @@ $dp.append($tp); } - this.$timeObj = $tp.find('.ui_tpicker_time'); + this.$timeObj = $tp.find('.ui_tpicker_time_input'); + this.$timeObj.change(function () { + var timeFormat = tp_inst.inst.settings.timeFormat; + var parsedTime = $.datepicker.parseTime(timeFormat, this.value); + var update = new Date(); + if (parsedTime) { + update.setHours(parsedTime.hour); + update.setMinutes(parsedTime.minute); + update.setSeconds(parsedTime.second); + $.datepicker._setTime(tp_inst.inst, update); + } else { + this.value = tp_inst.formattedTime; + this.blur(); + } + }); if (this.inst !== null) { var timeDefined = this.timeDefined; @@ -543,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); @@ -695,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), @@ -826,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() ); @@ -869,10 +883,15 @@ this.formattedTime = $.datepicker.formatTime(o.timeFormat, this, o); if (this.$timeObj) { if (pickerTimeFormat === o.timeFormat) { - this.$timeObj.text(this.formattedTime + pickerTimeSuffix); + this.$timeObj.val(this.formattedTime + pickerTimeSuffix); } else { - this.$timeObj.text($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix); + this.$timeObj.val($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix); + } + if (this.$timeObj[0].setSelectionRange) { + var sPos = this.$timeObj[0].selectionStart; + var ePos = this.$timeObj[0].selectionEnd; + this.$timeObj[0].setSelectionRange(sPos, ePos); } } @@ -900,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)), @@ -911,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; @@ -921,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)) { @@ -946,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); @@ -1013,7 +1032,7 @@ stop: function (event, ui) { tp_inst._onSelectHandler(); } - }); + }); }, options: function (tp_inst, obj, unit, opts, val) { if (tp_inst._defaults.isRTL) { @@ -1026,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) { @@ -1089,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')); @@ -1324,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); } @@ -1477,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); @@ -1504,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) { @@ -1522,7 +1541,7 @@ } } else { - $.datepicker._base_updateAlternate(inst); + $.datepicker._base_updateAlternate(inst); } }; @@ -1548,18 +1567,23 @@ }; /* - * override "Today" button to also grab the time. + * override "Today" button to also grab the time and set it to input field. */ $.datepicker._base_gotoToday = $.datepicker._gotoToday; $.datepicker._gotoToday = function (id) { - var inst = this._getInst($(id)[0]), - $dp = inst.dpDiv; + var inst = this._getInst($(id)[0]); + this._base_gotoToday(id); var tp_inst = this._get(inst, 'timepicker'); - selectLocalTimezone(tp_inst); + if (!tp_inst) { + return; + } + + var tzoffset = $.timepicker.timezoneOffsetNumber(tp_inst.timezone); var now = new Date(); + now.setMinutes(now.getMinutes() + now.getTimezoneOffset() + parseInt(tzoffset, 10)); this._setTime(inst, now); this._setDate(inst, now); - this._base_gotoToday(id); + tp_inst._onSelectHandler(); }; /* @@ -1611,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(); @@ -1679,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) { @@ -1689,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); @@ -1717,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; @@ -1854,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); @@ -1870,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 @@ -2028,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'; } @@ -2048,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 @@ -2059,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; }; @@ -2172,7 +2217,7 @@ date.setMilliseconds(date.getMilliseconds() - options.minInterval); } } - + if (date.getTime) { other[method].call(other, 'option', option, date); } @@ -2198,7 +2243,7 @@ }, options, options.end)); checkDates(startTime, endTime); - + selected(startTime, endTime, 'minDate'); selected(endTime, startTime, 'maxDate'); @@ -2211,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)); } }; diff --git a/test/jquery-ui-timepicker-addon_spec.js b/test/jquery-ui-timepicker-addon_spec.js index b5d8507..454b857 100644 --- a/test/jquery-ui-timepicker-addon_spec.js +++ b/test/jquery-ui-timepicker-addon_spec.js @@ -696,4 +696,58 @@ describe('datetimepicker', function() { expect(inputFocusSpy).not.toHaveBeenCalled(); }); }); + + describe('timeInput', function () { + var $input; + beforeEach(function () { + $input = affix('input'); + }); + describe('option', function () { + it('just display, input disabled', function () { + $input.datetimepicker(); + $input.trigger('focus'); + var $timeInput = $('.ui_tpicker_time_input'); + expect($timeInput.attr('disabled')).toBe('disabled'); + }); + + it('allow type new time', function () { + $input.datetimepicker({timeInput: true}); + $input.trigger('focus'); + var $timeInput = $('.ui_tpicker_time_input'); + expect($timeInput.attr('disabled')).toBeUndefined(); + }); + }); + + describe('behavior', function () { + beforeEach(function () { + $input.datetimepicker({timeInput: true}); + $input.trigger('focus'); + }); + it('should update timepicker time', function () { + var inputTime = '12:34'; + var inst = $.datepicker._getInst($input.get(0)); + var tp_inst = $.datepicker._get(inst, 'timepicker'); + var $timeInput = inst.dpDiv.find('.ui_tpicker_time_input'); + + $timeInput.val(inputTime).trigger('change'); + expect(tp_inst.formattedTime).toEqual(inputTime); + }); + it('revert to previous time value if input is invalid', function () { + var invalidTime = '123:456'; + var inst = $.datepicker._getInst($input.get(0)); + var tp_inst = $.datepicker._get(inst, 'timepicker'); + var $timeInput = inst.dpDiv.find('.ui_tpicker_time_input'); + + var previousTimeString = tp_inst.formattedTime; + $timeInput.val(invalidTime).trigger('change'); + expect(tp_inst.formattedTime).toEqual(previousTimeString); + }); + }); + + afterEach(function () { + var $widget = $input.datepicker('widget'); + $input.datepicker('destroy'); + $widget.remove(); + }); + }); });