Allow direct time input from widget

Author: insonifi

Diff for: 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-style: none; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: grey; width: 100%; }
+.ui-timepicker-div.ui_tpicker_time.ui_tpicker_time_input:focus { border-bottom-color: white; }
+
 .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 for: src/jquery-ui-timepicker-addon.js

@@ -393,7 +393,7 @@
 			if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) {
 				var noDisplay = ' ui_tpicker_unit_hide',
 					html = '<div class="ui-timepicker-div' + (o.isRTL ? ' ui-timepicker-rtl' : '') + (o.oneLine && o.controlType === 'select' ? ' ui-timepicker-oneLine' : '') + '"><dl>' + '<dt class="ui_tpicker_time_label' + ((o.showTime) ? '' : noDisplay) + '">' + o.timeText + '</dt>' +
-								'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"></dd>';
+								'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"><input class="ui_tpicker_time_input" ' + (o.timeInput ? '' : 'disabled') + '/></dd>';
 
 				// Create the markup
 				for (i = 0, l = this.units.length; i < l; i++) {
@@ -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;
@@ -868,12 +882,15 @@
 			// 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.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);
 				}
+				this.$timeObj[0].setSelectionRange(sPos, ePos);
 			}
 
 			this.timeDefined = true;

Diff for: 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();
+		});
+	});
 });