Skip to content

Commit 0d63761

Browse files
trentrichardsontrentrichardson
committed
Enable unit detection from timeFormat
1 parent e9fb16a commit 0d63761

File tree

2 files changed

+49
-35
lines changed

2 files changed

+49
-35
lines changed

‎index.html

+6-16
Original file line numberDiff line numberDiff line change
@@ -208,12 +208,6 @@ <h3>Alt Field Options</h3>
208208
<h3>Timezone Options</h3>
209209
<dl class="defs">
210210

211-
<!-- <dt>useLocalTimezone</dt>
212-
<dd><em>Default: false</em> - Whether to default timezone to the browser's set timezone.</dd>
213-
214-
<dt>defaultTimezone</dt>
215-
<dd><em>Default: "+0000"</em> - If not set, the default timezone used.</dd> -->
216-
217211
<dt>timezoneIso8601</dt>
218212
<dd><em>Default: false</em> - Whether to follow the ISO 8601 standard.</dd>
219213

@@ -240,19 +234,19 @@ <h3>Time Field Options</h3>
240234
</dd>
241235

242236
<dt>showHour</dt>
243-
<dd><em>Default: true</em> - Whether to show the hour slider.</dd>
237+
<dd><em>Default: null</em> - Whether to show the hour control. The default of null will use detection from timeFormat.</dd>
244238

245239
<dt>showMinute</dt>
246-
<dd><em>Default: true</em> - Whether to show the minute slider.</dd>
240+
<dd><em>Default: null</em> - Whether to show the minute control. The default of null will use detection from timeFormat.</dd>
247241

248242
<dt>showSecond</dt>
249-
<dd><em>Default: false</em> - Whether to show the second slider.</dd>
243+
<dd><em>Default: null</em> - Whether to show the second control. The default of null will use detection from timeFormat.</dd>
250244

251245
<dt>showMillisec</dt>
252-
<dd><em>Default: false</em> - Whether to show the millisecond slider.</dd>
246+
<dd><em>Default: null</em> - Whether to show the millisecond control. The default of null will use detection from timeFormat.</dd>
253247

254248
<dt>showTimezone</dt>
255-
<dd><em>Default: false</em> - Whether to show the timezone select.</dd>
249+
<dd><em>Default: null</em> - Whether to show the timezone select.</dd>
256250

257251
<dt>showTime</dt>
258252
<dd><em>Default: true</em> - Whether to show the time selected within the datetimepicker.</dd>
@@ -545,8 +539,7 @@ <h3 id="timezone_examples">Using Timezones</h3>
545539
</div>
546540
<pre>
547541
$('#timezone_example_1').datetimepicker({
548-
timeFormat: 'hh:mm tt z',
549-
showTimezone: true
542+
timeFormat: 'hh:mm tt z'
550543
});
551544
</pre>
552545
</div>
@@ -560,7 +553,6 @@ <h3 id="timezone_examples">Using Timezones</h3>
560553
<pre>
561554
$('#timezone_example_2').datetimepicker({
562555
timeFormat: 'HH:mm z',
563-
showTimezone: true,
564556
timezoneList: [
565557
{ value: '-0500', label: 'Eastern'},
566558
{ value: '-0600', label: 'Central' },
@@ -580,7 +572,6 @@ <h3 id="timezone_examples">Using Timezones</h3>
580572
<pre>
581573
$('#timezone_example_3').datetimepicker({
582574
timeFormat: 'HH:mm z',
583-
showTimezone: true,
584575
timezone: 'MT',
585576
timezoneList: [
586577
{ value: 'ET', label: 'Eastern'},
@@ -618,7 +609,6 @@ <h3 id="slider_examples">Slider Modifications</h3>
618609
</div>
619610
<pre>
620611
$('#slider_example_2').datetimepicker({
621-
showSecond: true,
622612
timeFormat: 'HH:mm:ss',
623613
stepHour: 2,
624614
stepMinute: 10,

‎jquery-ui-timepicker-addon.js

+43-19
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@
5858
this._defaults = { // Global defaults for all the datetime picker instances
5959
showButtonPanel: true,
6060
timeOnly: false,
61-
showHour: true,
62-
showMinute: true,
63-
showSecond: false,
64-
showMillisec: false,
65-
showTimezone: false,
61+
showHour: null,
62+
showMinute: null,
63+
showSecond: null,
64+
showMillisec: null,
65+
showTimezone: null,
6666
showTime: true,
6767
stepHour: 1,
6868
stepMinute: 1,
@@ -137,6 +137,7 @@
137137
formattedDateTime: '',
138138
timezoneList: null,
139139
units: ['hour','minute','second','millisec'],
140+
support: {},
140141
control: null,
141142

142143
/*
@@ -210,6 +211,12 @@
210211
return val.toUpperCase();
211212
});
212213

214+
// detect which units are supported
215+
tp_inst.support = detectSupport(
216+
tp_inst._defaults.timeFormat +
217+
(tp_inst._defaults.pickerTimeFormat? tp_inst._defaults.pickerTimeFormat:'') +
218+
(tp_inst._defaults.altTimeFormat? tp_inst._defaults.altTimeFormat:''));
219+
213220
// controlType is string - key to our this._controls
214221
if(typeof(tp_inst._defaults.controlType) === 'string'){
215222
if($.fn[tp_inst._defaults.controlType] === undefined){
@@ -336,6 +343,7 @@
336343
tp_inst = this,
337344
litem = '',
338345
uitem = '',
346+
show = null,
339347
max = {},
340348
gridSize = {},
341349
size = null,
@@ -352,22 +360,24 @@
352360
for(i=0,l=this.units.length; i<l; i++){
353361
litem = this.units[i];
354362
uitem = litem.substr(0,1).toUpperCase() + litem.substr(1);
363+
show = o['show'+uitem] !== null? o['show'+uitem] : this.support[litem];
364+
355365
// Added by Peter Medeiros:
356366
// - Figure out what the hour/minute/second max should be based on the step values.
357367
// - Example: if stepMinute is 15, then minMax is 45.
358368
max[litem] = parseInt((o[litem+'Max'] - ((o[litem+'Max'] - o[litem+'Min']) % o['step'+uitem])), 10);
359369
gridSize[litem] = 0;
360370

361-
html += '<dt class="ui_tpicker_'+ litem +'_label"' + ((o['show'+uitem]) ? '' : noDisplay) + '>' + o[litem +'Text'] + '</dt>' +
362-
'<dd class="ui_tpicker_'+ litem +'"><div class="ui_tpicker_'+ litem +'_slider"' + ((o['show'+uitem]) ? '' : noDisplay) + '></div>';
371+
html += '<dt class="ui_tpicker_'+ litem +'_label"' + (show ? '' : noDisplay) + '>' + o[litem +'Text'] + '</dt>' +
372+
'<dd class="ui_tpicker_'+ litem +'"><div class="ui_tpicker_'+ litem +'_slider"' + (show ? '' : noDisplay) + '></div>';
363373

364-
if (o['show'+uitem] && o[litem+'Grid'] > 0) {
374+
if (show && o[litem+'Grid'] > 0) {
365375
html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
366376

367377
if(litem == 'hour'){
368378
for (var h = o[litem+'Min']; h <= max[litem]; h += parseInt(o[litem+'Grid'], 10)) {
369379
gridSize[litem]++;
370-
var tmph = $.datepicker.formatTime(useAmpm(o.pickerTimeFormat || o.timeFormat)? 'hht':'HH', {hour:h}, o);
380+
var tmph = $.datepicker.formatTime(this.support.ampm? 'hht':'HH', {hour:h}, o);
371381
html += '<td data-for="'+litem+'">' + tmph + '</td>';
372382
}
373383
}
@@ -384,8 +394,9 @@
384394
}
385395

386396
// Timezone
387-
html += '<dt class="ui_tpicker_timezone_label"' + ((o.showTimezone) ? '' : noDisplay) + '>' + o.timezoneText + '</dt>';
388-
html += '<dd class="ui_tpicker_timezone" ' + ((o.showTimezone) ? '' : noDisplay) + '></dd>';
397+
var showTz = o.showTimezone !== null? o.showTimezone : this.support.timezone;
398+
html += '<dt class="ui_tpicker_timezone_label"' + (showTz ? '' : noDisplay) + '>' + o.timezoneText + '</dt>';
399+
html += '<dd class="ui_tpicker_timezone" ' + (showTz ? '' : noDisplay) + '></dd>';
389400

390401
// Create the elements from string
391402
html += '</dl></div>';
@@ -401,12 +412,13 @@
401412
for(i=0,l=tp_inst.units.length; i<l; i++){
402413
litem = tp_inst.units[i];
403414
uitem = litem.substr(0,1).toUpperCase() + litem.substr(1);
415+
show = o['show'+uitem] !== null? o['show'+uitem] : this.support[litem];
404416

405417
// add the slider
406418
tp_inst[litem+'_slider'] = tp_inst.control.create(tp_inst, $tp.find('.ui_tpicker_'+litem+'_slider'), litem, tp_inst[litem], o[litem+'Min'], max[litem], o['step'+uitem]);
407419

408420
// adjust the grid and add click event
409-
if (o['show'+uitem] && o[litem+'Grid'] > 0) {
421+
if (show && o[litem+'Grid'] > 0) {
410422
size = 100 * gridSize[litem] * o[litem+'Grid'] / (max[litem] - o[litem+'Min']);
411423
$tp.find('.ui_tpicker_'+litem+' table').css({
412424
width: size + "%",
@@ -722,7 +734,7 @@
722734

723735
this._limitMinMaxDateTime(this.inst, true);
724736
}
725-
if (useAmpm(o.timeFormat)) {
737+
if (this.support.ampm) {
726738
this.ampm = ampm;
727739
}
728740

@@ -1318,7 +1330,8 @@
13181330

13191331
if (tp_inst) {
13201332
if ($.datepicker._get(inst, 'constrainInput')) {
1321-
var ampm = useAmpm(tp_inst._defaults.timeFormat),
1333+
var ampm = tp_inst.support.ampm,
1334+
tz = tp_inst._defaults.showTimezone !== null? tp_inst._defaults.showTimezone : tp_inst.support.timezone,
13221335
dateChars = $.datepicker._possibleChars($.datepicker._get(inst, 'dateFormat')),
13231336
datetimeChars = tp_inst._defaults.timeFormat.toString()
13241337
.replace(/[hms]/g, '')
@@ -1330,7 +1343,7 @@
13301343
.replace(/t/g, ampm ? 'ap' : '') +
13311344
" " + tp_inst._defaults.separator +
13321345
tp_inst._defaults.timeSuffix +
1333-
(tp_inst._defaults.showTimezone ? tp_inst._defaults.timezoneList.join('') : '') +
1346+
(tz ? tp_inst._defaults.timezoneList.join('') : '') +
13341347
(tp_inst._defaults.amNames.join('')) + (tp_inst._defaults.pmNames.join('')) +
13351348
dateChars,
13361349
chr = String.fromCharCode(event.charCode === undefined ? event.keyCode : event.charCode);
@@ -1705,11 +1718,22 @@
17051718
};
17061719

17071720
/*
1708-
* Determine by the time format if should use ampm
1709-
* Returns true if should use ampm, false if not
1721+
* Determine by the time format which units are supported
1722+
* Returns an object of booleans for each unit
17101723
*/
1711-
var useAmpm = function(timeFormat){
1712-
return ((timeFormat.indexOf('t') !== -1 || timeFormat.indexOf('T') !== -1) && timeFormat.indexOf('h') !== -1);
1724+
var detectSupport = function(timeFormat){
1725+
var tf = timeFormat.replace(/\'.*?\'/g,'').toLowerCase(), // removes literals
1726+
isIn = function(f, t){ // does the format contain the token?
1727+
return f.indexOf(t) !== -1? true:false;
1728+
};
1729+
return {
1730+
hour: isIn(tf,'h'),
1731+
minute: isIn(tf,'m'),
1732+
second: isIn(tf,'s'),
1733+
millisec: isIn(tf,'l'),
1734+
timezone: isIn(tf,'z'),
1735+
ampm: isIn('t') && isIn(timeFormat,'h')
1736+
};
17131737
};
17141738

17151739
/*

0 commit comments

Comments
 (0)