Merge branch 'insonifi-dev' into dev

4 files changed, 63 insertions, 9 deletions

diff --git a/src/docs/examples.html b/src/docs/examples.html
index ae94ce6..9364fba 100644
--- a/src/docs/examples.html
+++ b/src/docs/examples.html
@@ -9,6 +9,7 @@
 		<li><a href="#timezone_examples" title="Using Timezones">Using Timezones</a></li>
 		<li><a href="#slider_examples" title="Slider Modifications">Slider Modifications</a></li>
 		<li><a href="#alt_examples" title="Alternate Field">Alternate Fields</a></li>
+		<li><a href="#input_examples" title="Time Input">Time Input</a></li>
 		<li><a href="#rest_examples" title="Time Restraints">Time Restraints</a></li>
 		<li><a href="#range_examples" title="Time Ranges">Time Ranges</a></li>
 		<li><a href="#utility_examples" title="Utilities">Utilities</a></li>
@@ -287,7 +288,7 @@ $('#alt_example_3').datetimepicker({
 });
 </pre>
 	</div>
-
+	
 	<!-- ============= example -->
 	<div class="example-container">
 		<p>With inline mode using altField:</p>
@@ -302,6 +303,38 @@ $('#alt_example_4').datetimepicker({
 });
 </pre>
 	</div>
+	
+<h3 id="input_examples">Time Input</h3>
+
+	<!-- ============= example -->
+	<div class="example-container">
+		<p>Allows time displayed inside the picker to allow being typed in.</p>
+		<div>
+			<input type="text" name="input_example_1" id="input_example_1" value="08/20/2014 01:22 pm" />
+		</div>
+<pre>
+$('#input_example_1').datetimepicker({
+	timeInput: true,
+	timeFormat: "hh:mm tt"
+});
+</pre>
+	</div>
+
+	<!-- ============= example -->
+	<div class="example-container">
+		<p>Don't show any sliders, only the time input.</p>
+		<div>
+			<input type="text" name="input_example_1" id="input_example_2" value="08/20/2014 01:22 pm" />
+		</div>
+<pre>
+$('#input_example_2').datetimepicker({
+	timeInput: true,
+	timeFormat: "hh:mm tt",
+	showHour: false,
+	showMinute: false
+});
+</pre>
+	</div>
 
 	<h3 id="rest_examples">Time Restraints</h3>
 
@@ -541,6 +574,4 @@ $('#utility_example_3').text(JSON.stringify(
 	$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {}) 
 ));
 </pre>
-	</div>
-
-</div>
\ No newline at end of file
+</div>
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 @@
 	<dl class="defs">
 		<dt>showButtonPanel</dt>
 			<dd><em>Default: true</em> - Whether to show the button panel at the bottom.  This is generally needed.</dd>
-
+    			
+    <dt>timeInput</dt>
+			<dd><em>Default: false</em> - Allows direct input in time field</dd>
+			
 		<dt>timeOnly</dt>
 			<dd><em>Default: false</em> - Hide the datepicker and only provide a time interface.</dd>
 
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 f7ed0d2..d8acddd 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;