Skip to content

Commit 038bfc2

Browse files
trentrichardsontrentrichardson
committed
Add control type for using select instead of slider
1 parent f087709 commit 038bfc2

File tree

2 files changed

+120
-36
lines changed

2 files changed

+120
-36
lines changed

‎index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,9 @@ <h3>Timezone Options</h3>
222222
<h3>Time Field Settings</h3>
223223
<dl class="defs">
224224

225+
<dt>controlType</dt>
226+
<dd><em>Default: 'slider'</em> - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used.</dd>
227+
225228
<dt>showHour</dt>
226229
<dd><em>Default: true</em> - Whether to show the hour slider.</dd>
227230

@@ -600,6 +603,19 @@ <h3 id="slider_examples">Slider Modifications</h3>
600603
});</pre>
601604
</div>
602605

606+
<!-- ============= example -->
607+
<div class="example-container">
608+
<p>Use dropdowns instead of sliders</p>
609+
<div>
610+
<input type="text" name="slider_example_4" id="slider_example_4" value="" />
611+
</div>
612+
<pre>
613+
$('#slider_example_4').datetimepicker({
614+
controlType: 'select',
615+
ampm: true
616+
});</pre>
617+
</div>
618+
603619
<h3 id="alt_examples">Alternate Fields</h3>
604620

605621
<!-- ============= example -->

‎jquery-ui-timepicker-addon.js

Lines changed: 104 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@
101101
timezoneList: null,
102102
addSliderAccess: false,
103103
sliderAccessArgs: null,
104+
controlType: 'slider',
104105
defaultValue: null
105106
};
106107
$.extend(this._defaults, this.regional['']);
@@ -136,6 +137,7 @@
136137
formattedDateTime: '',
137138
timezoneList: null,
138139
units: ['hour','minute','second','millisec'],
140+
control: null,
139141

140142
/*
141143
* Override the default settings for all instances of the time picker.
@@ -206,6 +208,11 @@
206208
return val.toUpperCase();
207209
});
208210

211+
// select control type will always be available
212+
if(tp_inst._defaults.controlType == 'slider' && $.fn.slider === undefined){
213+
tp_inst._defaults.controlType = 'select';
214+
}
215+
209216
if (tp_inst._defaults.timezoneList === null) {
210217
var timezoneList = ['-1200', '-1100', '-1000', '-0930', '-0900', '-0800', '-0700', '-0600', '-0500', '-0430', '-0400', '-0330', '-0300', '-0200', '-0100', '+0000',
211218
'+0100', '+0200', '+0300', '+0330', '+0400', '+0430', '+0500', '+0530', '+0545', '+0600', '+0630', '+0700', '+0800', '+0845', '+0900', '+0930',
@@ -219,6 +226,7 @@
219226
tp_inst._defaults.timezoneList = timezoneList;
220227
}
221228

229+
tp_inst.control = tp_inst._controls[tp_inst._defaults.controlType];
222230
tp_inst.timezone = tp_inst._defaults.timezone;
223231
tp_inst.hour = tp_inst._defaults.hour;
224232
tp_inst.minute = tp_inst._defaults.minute;
@@ -391,21 +399,7 @@
391399
uitem = litem.substr(0,1).toUpperCase() + litem.substr(1);
392400

393401
// add the slider
394-
tp_inst[litem+'_slider'] = $tp.find('.ui_tpicker_'+litem+'_slider').prop('slide', null).slider({
395-
orientation: "horizontal",
396-
value: tp_inst[litem],
397-
min: o[litem+'Min'],
398-
max: max[litem],
399-
step: o['step'+uitem],
400-
slide: function(event, ui) {
401-
$(this).slider("option", "value", ui.value);
402-
tp_inst._onTimeChange();
403-
},
404-
stop: function(event, ui) {
405-
//Emulate datepicker onSelect behavior. Call on slidestop.
406-
tp_inst._onSelectHandler();
407-
}
408-
});
402+
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]);
409403

410404
// adjust the grid and add click event
411405
if (o['show'+uitem] && o[litem+'Grid'] > 0) {
@@ -434,7 +428,8 @@
434428
h = aph + 12;
435429
}
436430
}
437-
tp_inst[f+'_slider'].slider("option", "value", parseInt(h,10));
431+
tp_inst.control.value(tp_inst, tp_inst[f+'_slider'], parseInt(h,10));
432+
438433
tp_inst._onTimeChange();
439434
tp_inst._onSelectHandler();
440435
})
@@ -626,28 +621,20 @@
626621
millisecMax = parseInt((this._defaults.millisecMax - ((this._defaults.millisecMax - this._defaults.millisecMin) % this._defaults.stepMillisec)), 10);
627622

628623
if (this.hour_slider) {
629-
this.hour_slider.slider("option", {
630-
min: this._defaults.hourMin,
631-
max: hourMax
632-
}).slider('value', this.hour);
624+
this.control.options(this, this.hour_slider, { min: this._defaults.hourMin, max: hourMax });
625+
this.control.value(this, this.hour_slider, this.hour);
633626
}
634627
if (this.minute_slider) {
635-
this.minute_slider.slider("option", {
636-
min: this._defaults.minuteMin,
637-
max: minMax
638-
}).slider('value', this.minute);
628+
this.control.options(this, this.minute_slider, { min: this._defaults.minuteMin, max: minMax });
629+
this.control.value(this, this.minute_slider, this.minute);
639630
}
640631
if (this.second_slider) {
641-
this.second_slider.slider("option", {
642-
min: this._defaults.secondMin,
643-
max: secMax
644-
}).slider('value', this.second);
632+
this.control.options(this, this.second_slider, { min: this._defaults.secondMin, max: secMax });
633+
this.control.value(this, this.second_slider, this.second);
645634
}
646635
if (this.millisec_slider) {
647-
this.millisec_slider.slider("option", {
648-
min: this._defaults.millisecMin,
649-
max: millisecMax
650-
}).slider('value', this.millisec);
636+
this.control.options(this, this.millisec_slider, { min: this._defaults.millisecMin, max: millisecMax });
637+
this.control.value(this, this.millisec_slider, this.millisec);
651638
}
652639
}
653640

@@ -658,10 +645,10 @@
658645
* on time change is also called when the time is updated in the text field
659646
*/
660647
_onTimeChange: function() {
661-
var hour = (this.hour_slider) ? this.hour_slider.slider('value') : false,
662-
minute = (this.minute_slider) ? this.minute_slider.slider('value') : false,
663-
second = (this.second_slider) ? this.second_slider.slider('value') : false,
664-
millisec = (this.millisec_slider) ? this.millisec_slider.slider('value') : false,
648+
var hour = (this.hour_slider) ? this.control.value(this, this.hour_slider) : false,
649+
minute = (this.minute_slider) ? this.control.value(this, this.minute_slider) : false,
650+
second = (this.second_slider) ? this.control.value(this, this.second_slider) : false,
651+
millisec = (this.millisec_slider) ? this.control.value(this, this.millisec_slider) : false,
665652
timezone = (this.timezone_select) ? this.timezone_select.val() : false,
666653
o = this._defaults;
667654

@@ -843,6 +830,87 @@
843830
}
844831
}
845832
}
833+
},
834+
835+
/*
836+
* Small abstraction to control types
837+
*/
838+
_controls: {
839+
slider: {
840+
create: function(tp_inst, obj, unit, val, min, max, step){
841+
return obj.prop('slide', null).slider({
842+
orientation: "horizontal",
843+
value: val,
844+
min: min,
845+
max: max,
846+
step: step,
847+
slide: function(event, ui) {
848+
tp_inst.control.value(tp_inst, $(this), ui.value);
849+
tp_inst._onTimeChange();
850+
},
851+
stop: function(event, ui) {
852+
tp_inst._onSelectHandler();
853+
}
854+
});
855+
},
856+
options: function(tp_inst, obj, opts, val){
857+
if(typeof(opts) == 'string' && val !== undefined)
858+
return obj.slider(opts, val);
859+
return obj.slider(opts);
860+
},
861+
value: function(tp_inst, obj, val){
862+
if(val !== undefined)
863+
return obj.slider('value', val);
864+
return obj.slider('value');
865+
}
866+
},
867+
select: {
868+
create: function(tp_inst, obj, unit, val, min, max, step){
869+
var sel = '<select class="ui-timepicker-select" data-unit="'+ unit +'" data-min="'+ min +'" data-max="'+ max +'" data-step="'+ step +'">',
870+
ul = tp_inst._defaults.timeFormat.indexOf('t') !== -1? 'toLowerCase':'toUpperCase';
871+
872+
for(var i=min; i<=max; i+=step){
873+
sel += '<option value="'+ i +'"'+ (i==val? ' selected':'') +'>';
874+
if(unit == 'hour' && tp_inst._defaults.ampm){
875+
if(i === 0 || i === 12)
876+
sel += '12';
877+
else sel += ('0'+ (i%12).toString()).substr(-2);
878+
sel += ' '+ ((i<12)? tp_inst._defaults.amNames[0] : tp_inst._defaults.pmNames[0])[ul]();
879+
}
880+
else if(unit == 'millisec') sel += i;
881+
else sel += ('0'+ i.toString()).substr(-2)
882+
sel += '</option>';
883+
}
884+
sel += '</select>';
885+
886+
obj.children('select').remove();
887+
888+
$(sel).appendTo(obj).change(function(e){
889+
tp_inst._onTimeChange();
890+
tp_inst._onSelectHandler();
891+
});
892+
893+
return obj;
894+
},
895+
options: function(tp_inst, obj, opts, val){
896+
var o = {},
897+
$t = obj.find('select');
898+
899+
if(typeof(opts) == 'string'){
900+
if(val == undefined)
901+
return $t.data(opts);
902+
o[opts] = val;
903+
}
904+
905+
tp_inst.control.create(tp_inst, obj, $t.data('unit'), $t.val(), o.min || $t.data('min'), o.max || $t.data('max'), o.step || $t.data('step'));
906+
},
907+
value: function(tp_inst, obj, val){
908+
var $t = obj.children('select');
909+
if(val !== undefined)
910+
return $t.val(val);
911+
return $t.val();
912+
}
913+
}
846914
}
847915

848916
});

0 commit comments

Comments
 (0)