Skip to content

Commit 38589ab

Browse files
trentrichardsontrentrichardson
committed
trentrichardson#782 - Adds oneLine option for controlType select
1 parent df9b22e commit 38589ab

9 files changed

+87
-19
lines changed

‎dist/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,9 @@ <h3>Other Options</h3>
363363
<dt>showTimepicker</dt>
364364
<dd><em>Default: true</em> - Whether to show the timepicker within the datepicker.</dd>
365365

366+
<dt>oneLine</dt>
367+
<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>
368+
366369
<dt>addSliderAccess</dt>
367370
<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>
368371

@@ -695,6 +698,20 @@ <h3 id="slider_examples">Slider Modifications</h3>
695698
});</pre>
696699
</div>
697700

701+
<!-- ============= example -->
702+
<div class="example-container">
703+
<p>Uses one line dropdowns instead of sliders.</p>
704+
<div>
705+
<input type="text" name="slider_example_4andHalf" id="slider_example_4andHalf" value="" />
706+
</div>
707+
<pre>
708+
$('#slider_example_4andHalf').datetimepicker({
709+
controlType: 'select',
710+
oneLine: true,
711+
timeFormat: 'hh:mm tt'
712+
});</pre>
713+
</div>
714+
698715
<!-- ============= example -->
699716
<div class="example-container">
700717
<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>

‎dist/jquery-ui-timepicker-addon.css

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,24 @@
44
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
55
.ui-timepicker-div td { font-size: 90%; }
66
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
7+
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
78

89
.ui-timepicker-rtl{ direction: rtl; }
910
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
1011
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
11-
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
12+
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
13+
14+
/* Shortened version style */
15+
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
16+
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
17+
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
18+
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
19+
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
20+
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
21+
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
22+
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
23+
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
24+
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
25+
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
26+
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
27+
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }

‎dist/jquery-ui-timepicker-addon.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
addSliderAccess: false,
102102
sliderAccessArgs: null,
103103
controlType: 'slider',
104+
oneLine: false,
104105
defaultValue: null,
105106
parse: 'strict'
106107
};
@@ -366,9 +367,9 @@
366367

367368
// Prevent displaying twice
368369
if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) {
369-
var noDisplay = ' style="display:none;"',
370-
html = '<div class="ui-timepicker-div' + (o.isRTL ? ' ui-timepicker-rtl' : '') + '"><dl>' + '<dt class="ui_tpicker_time_label"' + ((o.showTime) ? '' : noDisplay) + '>' + o.timeText + '</dt>' +
371-
'<dd class="ui_tpicker_time"' + ((o.showTime) ? '' : noDisplay) + '></dd>';
370+
var noDisplay = ' ui_tpicker_unit_hide',
371+
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>' +
372+
'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"></dd>';
372373

373374
// Create the markup
374375
for (i = 0, l = this.units.length; i < l; i++) {
@@ -382,8 +383,8 @@
382383
max[litem] = parseInt((o[litem + 'Max'] - ((o[litem + 'Max'] - o[litem + 'Min']) % o['step' + uitem])), 10);
383384
gridSize[litem] = 0;
384385

385-
html += '<dt class="ui_tpicker_' + litem + '_label"' + (show ? '' : noDisplay) + '>' + o[litem + 'Text'] + '</dt>' +
386-
'<dd class="ui_tpicker_' + litem + '"><div class="ui_tpicker_' + litem + '_slider"' + (show ? '' : noDisplay) + '></div>';
386+
html += '<dt class="ui_tpicker_' + litem + '_label' + (show ? '' : noDisplay) + '">' + o[litem + 'Text'] + '</dt>' +
387+
'<dd class="ui_tpicker_' + litem + (show ? '' : noDisplay) + '"><div class="ui_tpicker_' + litem + '_slider' + (show ? '' : noDisplay) + '"></div>';
387388

388389
if (show && o[litem + 'Grid'] > 0) {
389390
html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
@@ -409,8 +410,8 @@
409410

410411
// Timezone
411412
var showTz = o.showTimezone !== null ? o.showTimezone : this.support.timezone;
412-
html += '<dt class="ui_tpicker_timezone_label"' + (showTz ? '' : noDisplay) + '>' + o.timezoneText + '</dt>';
413-
html += '<dd class="ui_tpicker_timezone" ' + (showTz ? '' : noDisplay) + '></dd>';
413+
html += '<dt class="ui_tpicker_timezone_label' + (showTz ? '' : noDisplay) + '">' + o.timezoneText + '</dt>';
414+
html += '<dd class="ui_tpicker_timezone' + (showTz ? '' : noDisplay) + '"></dd>';
414415

415416
// Create the elements from string
416417
html += '</dl></div>';

‎dist/jquery-ui-timepicker-addon.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/jquery-ui-timepicker-addon.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/docs/examples.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,20 @@ <h3 id="slider_examples">Slider Modifications</h3>
180180
});</pre>
181181
</div>
182182

183+
<!-- ============= example -->
184+
<div class="example-container">
185+
<p>Uses one line dropdowns instead of sliders.</p>
186+
<div>
187+
<input type="text" name="slider_example_4andHalf" id="slider_example_4andHalf" value="" />
188+
</div>
189+
<pre>
190+
$('#slider_example_4andHalf').datetimepicker({
191+
controlType: 'select',
192+
oneLine: true,
193+
timeFormat: 'hh:mm tt'
194+
});</pre>
195+
</div>
196+
183197
<!-- ============= example -->
184198
<div class="example-container">
185199
<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>

‎src/docs/options.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,9 @@ <h3>Other Options</h3>
227227
<dt>showTimepicker</dt>
228228
<dd><em>Default: true</em> - Whether to show the timepicker within the datepicker.</dd>
229229

230+
<dt>oneLine</dt>
231+
<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>
232+
230233
<dt>addSliderAccess</dt>
231234
<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>
232235

‎src/jquery-ui-timepicker-addon.css

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,24 @@
44
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
55
.ui-timepicker-div td { font-size: 90%; }
66
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
7+
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
78

89
.ui-timepicker-rtl{ direction: rtl; }
910
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
1011
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
11-
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
12+
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
13+
14+
/* Shortened version style */
15+
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
16+
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
17+
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
18+
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
19+
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
20+
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
21+
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
22+
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
23+
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
24+
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
25+
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
26+
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
27+
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }

‎src/jquery-ui-timepicker-addon.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@
107107
addSliderAccess: false,
108108
sliderAccessArgs: null,
109109
controlType: 'slider',
110+
oneLine: false,
110111
defaultValue: null,
111112
parse: 'strict'
112113
};
@@ -372,9 +373,9 @@
372373

373374
// Prevent displaying twice
374375
if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) {
375-
var noDisplay = ' style="display:none;"',
376-
html = '<div class="ui-timepicker-div' + (o.isRTL ? ' ui-timepicker-rtl' : '') + '"><dl>' + '<dt class="ui_tpicker_time_label"' + ((o.showTime) ? '' : noDisplay) + '>' + o.timeText + '</dt>' +
377-
'<dd class="ui_tpicker_time"' + ((o.showTime) ? '' : noDisplay) + '></dd>';
376+
var noDisplay = ' ui_tpicker_unit_hide',
377+
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>' +
378+
'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"></dd>';
378379

379380
// Create the markup
380381
for (i = 0, l = this.units.length; i < l; i++) {
@@ -388,8 +389,8 @@
388389
max[litem] = parseInt((o[litem + 'Max'] - ((o[litem + 'Max'] - o[litem + 'Min']) % o['step' + uitem])), 10);
389390
gridSize[litem] = 0;
390391

391-
html += '<dt class="ui_tpicker_' + litem + '_label"' + (show ? '' : noDisplay) + '>' + o[litem + 'Text'] + '</dt>' +
392-
'<dd class="ui_tpicker_' + litem + '"><div class="ui_tpicker_' + litem + '_slider"' + (show ? '' : noDisplay) + '></div>';
392+
html += '<dt class="ui_tpicker_' + litem + '_label' + (show ? '' : noDisplay) + '">' + o[litem + 'Text'] + '</dt>' +
393+
'<dd class="ui_tpicker_' + litem + (show ? '' : noDisplay) + '"><div class="ui_tpicker_' + litem + '_slider' + (show ? '' : noDisplay) + '"></div>';
393394

394395
if (show && o[litem + 'Grid'] > 0) {
395396
html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
@@ -415,8 +416,8 @@
415416

416417
// Timezone
417418
var showTz = o.showTimezone !== null ? o.showTimezone : this.support.timezone;
418-
html += '<dt class="ui_tpicker_timezone_label"' + (showTz ? '' : noDisplay) + '>' + o.timezoneText + '</dt>';
419-
html += '<dd class="ui_tpicker_timezone" ' + (showTz ? '' : noDisplay) + '></dd>';
419+
html += '<dt class="ui_tpicker_timezone_label' + (showTz ? '' : noDisplay) + '">' + o.timezoneText + '</dt>';
420+
html += '<dd class="ui_tpicker_timezone' + (showTz ? '' : noDisplay) + '"></dd>';
420421

421422
// Create the elements from string
422423
html += '</dl></div>';

0 commit comments

Comments
 (0)