Skip to content

Commit 9a19d87

Browse files
refactor markup generation; add change event
1 parent 97e6641 commit 9a19d87

File tree

2 files changed

+47
-38
lines changed

2 files changed

+47
-38
lines changed

jquery-ui-timepicker-addon.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
22
.ui-timepicker-div dl { text-align: left; }
3-
.ui-timepicker-div dl dt { height: 25px; }
4-
.ui-timepicker-div dl dd { margin: -25px 10px 10px 65px; }
3+
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
4+
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
55
.ui-timepicker-div td { font-size: 90%; }
66
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

jquery-ui-timepicker-addon.js

Lines changed: 45 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -362,13 +362,17 @@ $.extend(Timepicker.prototype, {
362362
minuteGridSize = 0,
363363
secondGridSize = 0,
364364
millisecGridSize = 0,
365+
sliderChange = function(event, ui) {
366+
$(this).slider( "option", "value", ui.value);
367+
tp_inst._onTimeChange();
368+
},
365369
size;
366370

367371
// Hours
372+
html += '<dd class="ui_tpicker_hour"><div id="ui_tpicker_hour_' + dp_id + '"' +
373+
((o.showHour) ? '' : noDisplay) + '></div>';
368374
if (o.showHour && o.hourGrid > 0) {
369-
html += '<dd class="ui_tpicker_hour">' +
370-
'<div id="ui_tpicker_hour_' + dp_id + '"' + ((o.showHour) ? '' : noDisplay) + '></div>' +
371-
'<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
375+
html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
372376

373377
for (var h = o.hourMin; h <= hourMax; h += parseInt(o.hourGrid,10)) {
374378
hourGridSize++;
@@ -382,70 +386,63 @@ $.extend(Timepicker.prototype, {
382386
html += '<td>' + tmph + '</td>';
383387
}
384388

385-
html += '</tr></table></div>' +
386-
'</dd>';
387-
} else html += '<dd class="ui_tpicker_hour" id="ui_tpicker_hour_' + dp_id + '"' +
388-
((o.showHour) ? '' : noDisplay) + '></dd>';
389+
html += '</tr></table></div>';
390+
}
391+
html += '</dd>';
389392

393+
// Minutes
390394
html += '<dt class="ui_tpicker_minute_label" id="ui_tpicker_minute_label_' + dp_id + '"' +
391-
((o.showMinute) ? '' : noDisplay) + '>' + o.minuteText + '</dt>';
395+
((o.showMinute) ? '' : noDisplay) + '>' + o.minuteText + '</dt>'+
396+
'<dd class="ui_tpicker_minute"><div id="ui_tpicker_minute_' + dp_id + '"' +
397+
((o.showMinute) ? '' : noDisplay) + '></div>';
392398

393-
// Minutes
394399
if (o.showMinute && o.minuteGrid > 0) {
395-
html += '<dd class="ui_tpicker_minute ui_tpicker_minute_' + o.minuteGrid + '">' +
396-
'<div id="ui_tpicker_minute_' + dp_id + '"' +
397-
((o.showMinute) ? '' : noDisplay) + '></div>' +
398-
'<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
400+
html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>';
399401

400402
for (var m = o.minuteMin; m <= minMax; m += parseInt(o.minuteGrid,10)) {
401403
minuteGridSize++;
402404
html += '<td>' + ((m < 10) ? '0' : '') + m + '</td>';
403405
}
404406

405-
html += '</tr></table></div>' +
406-
'</dd>';
407-
} else html += '<dd class="ui_tpicker_minute" id="ui_tpicker_minute_' + dp_id + '"' +
408-
((o.showMinute) ? '' : noDisplay) + '></dd>';
407+
html += '</tr></table></div>';
408+
}
409+
html += '</dd>';
409410

410411
// Seconds
411412
html += '<dt class="ui_tpicker_second_label" id="ui_tpicker_second_label_' + dp_id + '"' +
412-
((o.showSecond) ? '' : noDisplay) + '>' + o.secondText + '</dt>';
413+
((o.showSecond) ? '' : noDisplay) + '>' + o.secondText + '</dt>'+
414+
'<dd class="ui_tpicker_second"><div id="ui_tpicker_second_' + dp_id + '"'+
415+
((o.showSecond) ? '' : noDisplay) + '></div>';
413416

414417
if (o.showSecond && o.secondGrid > 0) {
415-
html += '<dd class="ui_tpicker_second ui_tpicker_second_' + o.secondGrid + '">' +
416-
'<div id="ui_tpicker_second_' + dp_id + '"' +
417-
((o.showSecond) ? '' : noDisplay) + '></div>' +
418-
'<div style="padding-left: 1px"><table><tr>';
418+
html += '<div style="padding-left: 1px"><table><tr>';
419419

420420
for (var s = o.secondMin; s <= secMax; s += parseInt(o.secondGrid,10)) {
421421
secondGridSize++;
422422
html += '<td>' + ((s < 10) ? '0' : '') + s + '</td>';
423423
}
424424

425-
html += '</tr></table></div>' +
426-
'</dd>';
427-
} else html += '<dd class="ui_tpicker_second" id="ui_tpicker_second_' + dp_id + '"' +
428-
((o.showSecond) ? '' : noDisplay) + '></dd>';
425+
html += '</tr></table></div>';
426+
}
427+
html += '</dd>';
429428

430429
// Milliseconds
431430
html += '<dt class="ui_tpicker_millisec_label" id="ui_tpicker_millisec_label_' + dp_id + '"' +
432-
((o.showMillisec) ? '' : noDisplay) + '>' + o.millisecText + '</dt>';
431+
((o.showMillisec) ? '' : noDisplay) + '>' + o.millisecText + '</dt>'+
432+
'<dd class="ui_tpicker_millisec"><div id="ui_tpicker_millisec_' + dp_id + '"'+
433+
((o.showMillisec) ? '' : noDisplay) + '></div>';
433434

434435
if (o.showMillisec && o.millisecGrid > 0) {
435-
html += '<dd class="ui_tpicker_millisec ui_tpicker_millisec_' + o.millisecGrid + '">' +
436-
'<div id="ui_tpicker_millisec_' + dp_id + '"' +
437-
((o.showMillisec) ? '' : noDisplay) + '></div>' +
438-
'<div style="padding-left: 1px"><table><tr>';
436+
html += '<div style="padding-left: 1px"><table><tr>';
439437

440438
for (var l = o.millisecMin; l <= millisecMax; l += parseInt(o.millisecGrid,10)) {
441439
millisecGridSize++;
442440
html += '<td>' + ((l < 10) ? '0' : '') + s + '</td>';
443441
}
444442

445-
html += '</tr></table></div>' +
446-
'</dd>';
447-
} else html += '<dd class="ui_tpicker_millisec" id="ui_tpicker_millisec_' + dp_id + '"' +
448-
((o.showMillisec) ? '' : noDisplay) + '></dd>';
443+
html += '</tr></table></div>';
444+
}
445+
html += '</dd>';
449446

450447
// Timezone
451448
html += '<dt class="ui_tpicker_timezone_label" id="ui_tpicker_timezone_label_' + dp_id + '"' +
@@ -474,9 +471,13 @@ $.extend(Timepicker.prototype, {
474471
slide: function(event, ui) {
475472
tp_inst.hour_slider.slider( "option", "value", ui.value);
476473
tp_inst._onTimeChange();
474+
},
475+
change: function(event, ui) {
476+
tp_inst._onTimeChange();
477477
}
478478
});
479479

480+
480481
// Updated by Peter Medeiros:
481482
// - Pass in Event and UI instance into slide function
482483
this.minute_slider = $tp.find('#ui_tpicker_minute_'+ dp_id).slider({
@@ -486,9 +487,11 @@ $.extend(Timepicker.prototype, {
486487
max: minMax,
487488
step: o.stepMinute,
488489
slide: function(event, ui) {
489-
// update the global minute slider instance value with the current slider value
490490
tp_inst.minute_slider.slider( "option", "value", ui.value);
491491
tp_inst._onTimeChange();
492+
},
493+
change: function(event, ui) {
494+
tp_inst._onTimeChange();
492495
}
493496
});
494497

@@ -501,6 +504,9 @@ $.extend(Timepicker.prototype, {
501504
slide: function(event, ui) {
502505
tp_inst.second_slider.slider( "option", "value", ui.value);
503506
tp_inst._onTimeChange();
507+
},
508+
change: function(event, ui) {
509+
tp_inst._onTimeChange();
504510
}
505511
});
506512

@@ -513,6 +519,9 @@ $.extend(Timepicker.prototype, {
513519
slide: function(event, ui) {
514520
tp_inst.millisec_slider.slider( "option", "value", ui.value);
515521
tp_inst._onTimeChange();
522+
},
523+
change: function(event, ui) {
524+
tp_inst._onTimeChange();
516525
}
517526
});
518527

0 commit comments

Comments
 (0)