Skip to content

Commit af007ed

Browse files
rrnataviorrnatavio
committed
added support for dropdown time selection instead of sliders
1 parent 2050b7b commit af007ed

File tree

1 file changed

+143
-3
lines changed

1 file changed

+143
-3
lines changed

‎jquery-ui-timepicker-addon.js

Lines changed: 143 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ $.extend(Timepicker.prototype, {
124124
formattedTime: '',
125125
formattedDateTime: '',
126126
timezoneList: null,
127+
useTimeDropdown: false,
127128

128129
/* Override the default settings for all instances of the time picker.
129130
@param settings object - the new settings to use as defaults (anonymous object)
@@ -392,6 +393,24 @@ $.extend(Timepicker.prototype, {
392393

393394
html += '</tr></table></div>';
394395
}
396+
//TODO: consider implementing 'slider'-like script to separate the dropdown codes from this script
397+
if (o.showHour && tp_inst._defaults.useTimeDropdown) {
398+
var interval = o.hourGrid ? parseInt(o.hourGrid,10) : 1;
399+
html += '<div style="padding-left: 1px"><select class="ui-tpicker-grid-label">';
400+
for (var h = o.hourMin; h <= hourMax; h += interval) {
401+
hourGridSize++;
402+
var tmph = (o.ampm && h > 12) ? h-12 : h;
403+
if (tmph < 10) tmph = '0' + tmph;
404+
if (o.ampm) {
405+
if (h == 0) tmph = 12 +'a';
406+
else if (h < 12) tmph += 'a';
407+
else tmph += 'p';
408+
}
409+
html += '<option value="' + tmph + '">' + tmph + '</option>';
410+
}
411+
412+
html += '</select></div>';
413+
}
395414
html += '</dd>';
396415

397416
// Minutes
@@ -410,6 +429,17 @@ $.extend(Timepicker.prototype, {
410429

411430
html += '</tr></table></div>';
412431
}
432+
//TODO: consider implementing 'slider'-like script to separate the dropdown codes from this script
433+
if (o.showMinute && tp_inst._defaults.useTimeDropdown) {
434+
var interval = o.minuteGrid ? parseInt(o.minuteGrid,10) : 1;
435+
html += '<div style="padding-left: 1px"><select class="ui-tpicker-grid-label">';
436+
for (var m = o.minuteMin; m <= minMax; m += interval) {
437+
minuteGridSize++;
438+
var currMin = ((m < 10) ? '0' : '') + m ;
439+
html += '<option value="' + currMin + '">' + currMin + '</option>';
440+
}
441+
html += '</select></div>';
442+
}
413443
html += '</dd>';
414444

415445
// Seconds
@@ -428,6 +458,17 @@ $.extend(Timepicker.prototype, {
428458

429459
html += '</tr></table></div>';
430460
}
461+
//TODO: consider implementing 'slider'-like script to separate the dropdown codes from this script
462+
if (o.showSecond && tp_inst._defaults.useTimeDropdown) {
463+
var interval = o.secondGrid ? parseInt(o.secondGrid,10) : 1;
464+
html += '<div style="padding-left: 1px"><select>';
465+
for (var s = o.secondMin; s <= secMax; s += interval) {
466+
secondGridSize++;
467+
var currSec = ((s < 10) ? '0' : '') + s ;
468+
html += '<option value="' + currSec + '">' + currSec + '</option>';
469+
}
470+
html += '</select></div>';
471+
}
431472
html += '</dd>';
432473

433474
// Milliseconds
@@ -446,6 +487,17 @@ $.extend(Timepicker.prototype, {
446487

447488
html += '</tr></table></div>';
448489
}
490+
//TODO: consider implementing 'slider'-like script to separate the dropdown codes from this script
491+
if (o.showMillisec && tp_inst._defaults.useTimeDropdown) {
492+
var interval = o.millisecGrid ? parseInt(o.millisecGrid,10) : 1;
493+
html += '<div style="padding-left: 1px"><select>';
494+
for (var l = o.millisecMin; l <= millisecMax; l += interval) {
495+
millisecGridSize++;
496+
var currMSec = ((l < 10) ? '0' : '') + l ;
497+
html += '<option value="' + currMSec + '">' + currMSec + '</option>';
498+
}
499+
html += '</select></div>';
500+
}
449501
html += '</dd>';
450502

451503
// Timezone
@@ -529,9 +581,45 @@ $.extend(Timepicker.prototype, {
529581
this.timezone_select.change(function() {
530582
tp_inst._onTimeChange();
531583
});
532-
533-
// Add grid functionality
584+
585+
//TODO: duplicate codes. refactor
586+
if (o.showHour && tp_inst._defaults.useTimeDropdown) {
587+
$tp.find(".ui_tpicker_hour select").find("option").each( function(index){
588+
$(this).click(function() {
589+
var h = $(this).html();
590+
if (o.ampm) {
591+
var ap = h.substring(2).toLowerCase(),
592+
aph = parseInt(h.substring(0,2), 10);
593+
if (ap == 'a') {
594+
if (aph == 12) h = 0;
595+
else h = aph;
596+
} else if (aph == 12) h = 12;
597+
else h = aph + 12;
598+
}
599+
tp_inst.hour_slider.slider("option", "value", h);
600+
tp_inst._onTimeChange();
601+
tp_inst._onSelectHandler();
602+
});
603+
});
604+
$tp.find(".ui_tpicker_hour select").change(function() {
605+
//TODO: duplicate code. refactor
606+
var h = $(this).val();
607+
if (o.ampm) {
608+
var ap = h.substring(2).toLowerCase(),
609+
aph = parseInt(h.substring(0,2), 10);
610+
if (ap == 'a') {
611+
if (aph == 12) h = 0;
612+
else h = aph;
613+
} else if (aph == 12) h = 12;
614+
else h = aph + 12;
615+
}
616+
tp_inst.hour_slider.slider("option", "value", h);
617+
tp_inst._onTimeChange();
618+
tp_inst._onSelectHandler();
619+
});
620+
}
534621
if (o.showHour && o.hourGrid > 0) {
622+
// Add grid functionality
535623
size = 100 * hourGridSize * o.hourGrid / (hourMax - o.hourMin);
536624

537625
$tp.find(".ui_tpicker_hour table").css({
@@ -562,6 +650,21 @@ $.extend(Timepicker.prototype, {
562650
});
563651
}
564652

653+
//TODO: duplicate codes. refactor
654+
if (o.showMinute && tp_inst._defaults.useTimeDropdown) {
655+
$tp.find(".ui_tpicker_minute select").find("option").each(function(index) {
656+
$(this).click(function() {
657+
tp_inst.minute_slider.slider("option", "value", $(this).html());
658+
tp_inst._onTimeChange();
659+
tp_inst._onSelectHandler();
660+
});
661+
});
662+
$tp.find(".ui_tpicker_minute select").change(function() {
663+
tp_inst.minute_slider.slider("option", "value", $(this).val());
664+
tp_inst._onTimeChange();
665+
tp_inst._onSelectHandler();
666+
});
667+
}
565668
if (o.showMinute && o.minuteGrid > 0) {
566669
size = 100 * minuteGridSize * o.minuteGrid / (minMax - o.minuteMin);
567670
$tp.find(".ui_tpicker_minute table").css({
@@ -582,6 +685,21 @@ $.extend(Timepicker.prototype, {
582685
});
583686
}
584687

688+
//TODO: duplicate codes. refactor
689+
if (o.showSecond && tp_inst._defaults.useTimeDropdown) {
690+
$tp.find(".ui_tpicker_second select").find("option").each(function(index) {
691+
$(this).click(function() {
692+
tp_inst.second_slider.slider("option", "value", $(this).html());
693+
tp_inst._onTimeChange();
694+
tp_inst._onSelectHandler();
695+
});
696+
});
697+
$tp.find(".ui_tpicker_second select").change(function() {
698+
tp_inst.second_slider.slider("option", "value", $(this).val());
699+
tp_inst._onTimeChange();
700+
tp_inst._onSelectHandler();
701+
});
702+
}
585703
if (o.showSecond && o.secondGrid > 0) {
586704
$tp.find(".ui_tpicker_second table").css({
587705
width: size + "%",
@@ -601,6 +719,21 @@ $.extend(Timepicker.prototype, {
601719
});
602720
}
603721

722+
//TODO: duplicate codes. refactor
723+
if (o.showMillisec && tp_inst._defaults.useTimeDropdown) {
724+
$tp.find(".ui_tpicker_millisec select").find("option").each(function(index) {
725+
$(this).click(function() {
726+
tp_inst.millisec_slider.slider("option", "value", $(this).html());
727+
tp_inst._onTimeChange();
728+
tp_inst._onSelectHandler();
729+
});
730+
});
731+
$tp.find(".ui_tpicker_millisec select").change(function() {
732+
tp_inst.millisec_slider.slider("option", "value", $(this).val());
733+
tp_inst._onTimeChange();
734+
tp_inst._onSelectHandler();
735+
});
736+
}
604737
if (o.showMillisec && o.millisecGrid > 0) {
605738
$tp.find(".ui_tpicker_millisec table").css({
606739
width: size + "%",
@@ -641,6 +774,13 @@ $.extend(Timepicker.prototype, {
641774
this.second_slider.bind('slidestop',onSelectDelegate);
642775
this.millisec_slider.bind('slidestop',onSelectDelegate);
643776

777+
if (this._defaults.useTimeDropdown) {
778+
$tp.find("#ui_tpicker_hour_" + dp_id).hide();
779+
$tp.find("#ui_tpicker_minute_" + dp_id).hide();
780+
$tp.find("#ui_tpicker_second_" + dp_id).hide();
781+
$tp.find("#ui_tpicker_millisec_" + dp_id).hide();
782+
}
783+
644784
// slideAccess integration: http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/
645785
if (this._defaults.addSliderAccess){
646786
var sliderAccessArgs = this._defaults.sliderAccessArgs;
@@ -1323,4 +1463,4 @@ function extendRemove(target, props) {
13231463
$.timepicker = new Timepicker(); // singleton instance
13241464
$.timepicker.version = "1.0.0";
13251465

1326-
})(jQuery);
1466+
})(jQuery);

0 commit comments

Comments
 (0)