Allow direct time input from widget

2 files changed, 24 insertions, 4 deletions

diff --git a/src/jquery-ui-timepicker-addon.css b/src/jquery-ui-timepicker-addon.css
index 2d9e031..89294e6 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-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 --git a/src/jquery-ui-timepicker-addon.js b/src/jquery-ui-timepicker-addon.js
index f7ed0d2..408a9e1 100644
--- a/src/jquery-ui-timepicker-addon.js
+++ b/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;