#782 - Adds oneLine option for controlType select

4 files changed, 42 insertions, 8 deletions

diff --git a/src/docs/examples.html b/src/docs/examples.html
index 4765039..a04af2f 100644
--- a/src/docs/examples.html
+++ b/src/docs/examples.html
@@ -182,6 +182,20 @@ $('#slider_example_4').datetimepicker({
 
 	<!-- ============= example -->
 	<div class="example-container">
+		<p>Uses one line dropdowns instead of sliders.</p>
+		<div>
+			<input type="text" name="slider_example_4andHalf" id="slider_example_4andHalf" value="" />
+		</div>
+<pre>
+$('#slider_example_4andHalf').datetimepicker({
+	controlType: 'select',
+	oneLine: true,
+	timeFormat: 'hh:mm tt'
+});</pre>
+	</div>
+
+	<!-- ============= example -->
+	<div class="example-container">
 		<p>Create your own control by implementing the create, options, and value methods. If you want to use your new control for all instances use the $.timepicker.setDefaults({controlType:myControl}). Here we implement jQueryUI's spinner control (jQueryUI 1.9+).</p>
 		<div>
 			<input type="text" name="slider_example_5" id="slider_example_5" value="" />
diff --git a/src/docs/options.html b/src/docs/options.html
index 22fc123..d1b1e2c 100644
--- a/src/docs/options.html
+++ b/src/docs/options.html
@@ -227,6 +227,9 @@
 		<dt>showTimepicker</dt>
 			<dd><em>Default: true</em> - Whether to show the timepicker within the datepicker.</dd>
 
+		<dt>oneLine</dt>
+			<dd><em>Default: false</em> - Try to show the time dropdowns all on one line.  This should be used with controlType 'select' and as few units as possible.</dd>
+
 		<dt>addSliderAccess</dt>
 			<dd><em>Default: false</em> - Adds the <a href="http://trentrichardson.com/examples/jQuery-SliderAccess/" title="jQueryUI Slider Access Plugin">sliderAccess plugin</a> to sliders within timepicker</dd>
 
diff --git a/src/jquery-ui-timepicker-addon.css b/src/jquery-ui-timepicker-addon.css
index da12d98..2d9e031 100644
--- a/src/jquery-ui-timepicker-addon.css
+++ b/src/jquery-ui-timepicker-addon.css
@@ -4,8 +4,24 @@
 .ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
 .ui-timepicker-div td { font-size: 90%; }
 .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
+.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
 
 .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; }
-.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
\ No newline at end of file
+.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
+
+/* Shortened version style */
+.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
+.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
+.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
+.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
+.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
+.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
\ No newline at end of file
diff --git a/src/jquery-ui-timepicker-addon.js b/src/jquery-ui-timepicker-addon.js
index 81a0fe3..a92d277 100644
--- a/src/jquery-ui-timepicker-addon.js
+++ b/src/jquery-ui-timepicker-addon.js
@@ -107,6 +107,7 @@
 			addSliderAccess: false,
 			sliderAccessArgs: null,
 			controlType: 'slider',
+			oneLine: false,
 			defaultValue: null,
 			parse: 'strict'
 		};
@@ -372,9 +373,9 @@
 
 			// Prevent displaying twice
 			if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) {
-				var noDisplay = ' style="display:none;"',
-					html = '<div class="ui-timepicker-div' + (o.isRTL ? ' ui-timepicker-rtl' : '') + '"><dl>' + '<dt class="ui_tpicker_time_label"' + ((o.showTime) ? '' : noDisplay) + '>' + o.timeText + '</dt>' +
-								'<dd class="ui_tpicker_time"' + ((o.showTime) ? '' : noDisplay) + '></dd>';
+				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>';
 
 				// Create the markup
 				for (i = 0, l = this.units.length; i < l; i++) {
@@ -388,8 +389,8 @@
 					max[litem] = parseInt((o[litem + 'Max'] - ((o[litem + 'Max'] - o[litem + 'Min']) % o['step' + uitem])), 10);
 					gridSize[litem] = 0;
 
-					html += '<dt class="ui_tpicker_' + litem + '_label"' + (show ? '' : noDisplay) + '>' + o[litem + 'Text'] + '</dt>' +
-								'<dd class="ui_tpicker_' + litem + '"><div class="ui_tpicker_' + litem + '_slider"' + (show ? '' : noDisplay) + '></div>';
+					html += '<dt class="ui_tpicker_' + litem + '_label' + (show ? '' : noDisplay) + '">' + o[litem + 'Text'] + '</dt>' +
+								'<dd class="ui_tpicker_' + litem + (show ? '' : noDisplay) + '"><div class="ui_tpicker_' + litem + '_slider' + (show ? '' : noDisplay) + '"></div>';
 
 					if (show && o[litem + 'Grid'] > 0) {
 						html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
@@ -415,8 +416,8 @@
 				
 				// Timezone
 				var showTz = o.showTimezone !== null ? o.showTimezone : this.support.timezone;
-				html += '<dt class="ui_tpicker_timezone_label"' + (showTz ? '' : noDisplay) + '>' + o.timezoneText + '</dt>';
-				html += '<dd class="ui_tpicker_timezone" ' + (showTz ? '' : noDisplay) + '></dd>';
+				html += '<dt class="ui_tpicker_timezone_label' + (showTz ? '' : noDisplay) + '">' + o.timezoneText + '</dt>';
+				html += '<dd class="ui_tpicker_timezone' + (showTz ? '' : noDisplay) + '"></dd>';
 
 				// Create the elements from string
 				html += '</dl></div>';