From e5c7cfb6976ea47da5edefe2715b69a683479f45 Mon Sep 17 00:00:00 2001 From: Trent Richardson Date: Thu, 21 Oct 2010 08:32:23 -0400 Subject: Added changes by Mikko for time grid and altField --- jquery-ui-timepicker-addon.js | 311 ++++++++++++++++++++++++++---------------- 1 file changed, 190 insertions(+), 121 deletions(-) diff --git a/jquery-ui-timepicker-addon.js b/jquery-ui-timepicker-addon.js index a074c9d..502f906 100755 --- a/jquery-ui-timepicker-addon.js +++ b/jquery-ui-timepicker-addon.js @@ -1,8 +1,8 @@ /* * jQuery timepicker addon * By: Trent Richardson [http://trentrichardson.com] -* Version 0.7.1 -* Last Modified: 10/7/2010 +* Version 0.7.2 +* Last Modified: 10/21/2010 * * Copyright 2010 Trent Richardson * Dual licensed under the MIT and GPL licenses. @@ -14,9 +14,6 @@ * .ui-timepicker-div dl{ text-align: left; } * .ui-timepicker-div dl dt{ height: 25px; } * .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; } -* .ui-timepicker-div .ui_tpicker_hour div { padding-right: 2px; } -* .ui-timepicker-div .ui_tpicker_minute div { padding-right: 6px; } -* .ui-timepicker-div .ui_tpicker_second div { padding-right: 6px; } * .ui-timepicker-div td { font-size: 90%; } */ @@ -171,7 +168,8 @@ //######################################################################## // generate and inject html for timepicker into ui datepicker //######################################################################## - injectTimePicker: function(dp_inst, tp_inst) { + injectTimePicker: function(dp_inst, tp_inst) + { var $dp = dp_inst.dpDiv; var opts = tp_inst.defaults; @@ -179,209 +177,270 @@ // - Figure out what the hour/minute/second max should be based on the step values. // - Example: if stepMinute is 15, then minMax is 45. var hourMax = opts.hourMax - (opts.hourMax % opts.stepHour); - var minMax = opts.minuteMax - (opts.minuteMax % opts.stepMinute); - var secMax = opts.secondMax - (opts.secondMax % opts.stepSecond); + var minMax = opts.minuteMax - (opts.minuteMax % opts.stepMinute); + var secMax = opts.secondMax - (opts.secondMax % opts.stepSecond); // Prevent displaying twice - if ($dp.find("div#ui-timepicker-div-"+ dp_inst.id).length === 0) { + if ($dp.find("div#ui-timepicker-div-" + dp_inst.id).length === 0){ var noDisplay = ' style="display:none;"'; var html = '
' + - '
' + opts.timeText + '
' + - '
' + - '
' + opts.hourText + '
'; - - if (opts.hourGrid > 0) + '
' + opts.timeText + '
' + + '
' + + '
' + opts.hourText + '
'; + var hourGridSize = 0; + var minuteGridSize = 0; + var secondGridSize = 0; + + if (opts.showHour && opts.hourGrid > 0) { - html += '
' + - '
' + - '
'; - - for (var h = opts.hourMin; h < hourMax; h += opts.hourGrid) + html += '
' + + '
' + + '
'; + + for (var h = 0; h <= hourMax; h += opts.hourGrid) { + hourGridSize++; + var tmph = h; - if(opts.ampm && h > 12) - tmph = h-12; - else tmph = h; + if (opts.ampm && h > 12) + tmph = h - 12; + else + tmph = h; - if(tmph < 10) + if (tmph < 10) tmph = '0' + tmph; - if(opts.ampm) + if (opts.ampm) { - if(h == 0) - tmph = 12 +'a'; - else if(h < 12) + if (h == 0) + tmph = 12 + 'a'; + else if (h < 12) tmph += 'a'; - else tmph += 'p'; + else + tmph += 'p'; } html += ''; } - + html += '
' + tmph + '
' + '
'; } else { - html += '
'; + html += '
'; } - - html += '
' + opts.minuteText + '
'; - - if (opts.minuteGrid > 0) + + html += '
' + opts.minuteText + '
'; + + if (opts.showMinute && opts.minuteGrid > 0) { - html += '
' + + html += '
' + '
' + - '
'; - - for (var m = opts.minuteMin; m < minMax; m += opts.minuteGrid) + '
'; + + for (var m = 0; m <= minMax; m += opts.minuteGrid) { + minuteGridSize++; html += ''; } - + html += '
' + ((m < 10) ? '0' : '') + m + '
' + '
'; } else { - html += '
' + html += '
' } - - html += '
' + opts.secondText + '
'; - - if (opts.secondGrid > 0) + + html += '
' + opts.secondText + '
'; + + if (opts.showSecond && opts.secondGrid > 0) { - html += '
' + + html += '
' + '
' + - '
'; - - for (var s = opts.secondMin; s < secMax; s += opts.secondGrid) + '
'; + + for (var s = 0; s <= secMax; s += opts.secondGrid) { + secondGridSize++; html += ''; } - - html += '
' + ((s < 10) ? '0' : '') + s + '
' + + + html += '
' + ''; } else { - html += '
'; + html += '
'; } - + html += ''; $tp = $(html); // if we only want time picker... - if (opts.timeOnly === true) { + if (opts.timeOnly === true) + { $tp.prepend( '
' + - '
'+ opts.timeOnlyTitle +'
' + + '
' + opts.timeOnlyTitle + '
' + '
'); $dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide(); } - tp_inst.hour_slider = $tp.find('#ui_tpicker_hour_'+ dp_inst.id).slider({ + tp_inst.hour_slider = $tp.find('#ui_tpicker_hour_' + dp_inst.id).slider({ orientation: "horizontal", value: tp_inst.hour, min: opts.hourMin, max: hourMax, step: opts.stepHour, - slide: function(event, ui) { - tp_inst.hour_slider.slider( "option", "value", ui.value ); + slide: function(event, ui) + { + tp_inst.hour_slider.slider("option", "value", ui.value); tp_inst.onTimeChange(dp_inst, tp_inst); } }); // Updated by Peter Medeiros: // - Pass in Event and UI instance into slide function - tp_inst.minute_slider = $tp.find('#ui_tpicker_minute_'+ dp_inst.id).slider({ + tp_inst.minute_slider = $tp.find('#ui_tpicker_minute_' + dp_inst.id).slider({ orientation: "horizontal", value: tp_inst.minute, min: opts.minuteMin, max: minMax, step: opts.stepMinute, - slide: function(event, ui) { + slide: function(event, ui) + { // update the global minute slider instance value with the current slider value - tp_inst.minute_slider.slider( "option", "value", ui.value ); + tp_inst.minute_slider.slider("option", "value", ui.value); tp_inst.onTimeChange(dp_inst, tp_inst); } }); - tp_inst.second_slider = $tp.find('#ui_tpicker_second_'+ dp_inst.id).slider({ + tp_inst.second_slider = $tp.find('#ui_tpicker_second_' + dp_inst.id).slider({ orientation: "horizontal", value: tp_inst.second, min: opts.secondMin, max: secMax, step: opts.stepSecond, - slide: function(event, ui) { - tp_inst.second_slider.slider( "option", "value", ui.value ); + slide: function(event, ui) + { + tp_inst.second_slider.slider("option", "value", ui.value); tp_inst.onTimeChange(dp_inst, tp_inst); } }); // Add grid functionality - $tp.find(".ui_tpicker_hour td").each( - function(index) - { - $(this).click( - function() - { - var h = $(this).html(); - if(opts.ampm) + if (opts.showHour && opts.hourGrid > 0) + { + var size = 100 * hourGridSize * opts.hourGrid / (hourMax - opts.hourMin); + + $tp.find(".ui_tpicker_hour table").css({ + 'width': size + "%", + 'margin-left': (size / (-2 * hourGridSize)) + "%", + 'border-collapse': 'collapse' + }); + $tp.find(".ui_tpicker_hour td").each( + function(index) + { + $(this).click( + function() { - var ap = h.substring(2).toLowerCase(); - var aph = new Number(h.substring(0,2)); - - if(ap == 'a'){ - if(aph == 12) - h = 0; - else h = aph; - }else{ - if(aph == 12) - h = 12; - else h = aph + 12; + var h = $(this).html(); + if (opts.ampm) + { + var ap = h.substring(2).toLowerCase(); + var aph = new Number(h.substring(0, 2)); + + if (ap == 'a') + { + if (aph == 12) + h = 0; + else h = aph; + } else + { + if (aph == 12) + h = 12; + else h = aph + 12; + } } + tp_inst.hour_slider.slider("option", "value", h); + tp_inst.onTimeChange(dp_inst, tp_inst); } - tp_inst.hour_slider.slider("option", "value", h); - tp_inst.onTimeChange(dp_inst, tp_inst); - } - ); - - $(this).css({ 'cursor': "pointer", 'width': '1%', 'text-align': 'left' }); - } - ); - $tp.find(".ui_tpicker_minute td").each( - function(index) - { - $(this).click( - function() - { - tp_inst.minute_slider.slider("option", "value", $(this).html()); - tp_inst.onTimeChange(dp_inst, tp_inst); - } - ); - - $(this).css({ 'cursor': "pointer", 'width': '1%', 'text-align': 'left' }); - } - ); - $tp.find(".ui_tpicker_second td").each( - function(index) - { - $(this).click( - function() - { - tp_inst.second_slider.slider("option", "value", $(this).html()); - tp_inst.onTimeChange(dp_inst, tp_inst); - } - ); - $(this).css({ 'cursor': "pointer", 'width': '1%', 'text-align': 'left' }); - } - ); - + ); + $(this).css({ + 'cursor': "pointer", + 'width': (100 / hourGridSize) + '%', + 'text-align': 'center', + 'overflow': 'hidden' + }); + } + ); + } + + if (opts.showMinute && opts.minuteGrid > 0) + { + var size = 100 * minuteGridSize * opts.minuteGrid / (minMax - opts.minuteMin); + + $tp.find(".ui_tpicker_minute table").css({ + 'width': size + "%", + 'margin-left': (size / (-2 * minuteGridSize)) + "%", + 'border-collapse': 'collapse' + }); + $tp.find(".ui_tpicker_minute td").each( + function(index) + { + $(this).click( + function() + { + tp_inst.minute_slider.slider("option", "value", $(this).html()); + tp_inst.onTimeChange(dp_inst, tp_inst); + } + ); + $(this).css({ + 'cursor': "pointer", + 'width': (100 / minuteGridSize) + '%', + 'text-align': 'center', + 'overflow': 'hidden' + }); + } + ); + } + + if (opts.showSecond && opts.secondGrid > 0) + { + var size = 100 * secondGridSize * opts.secondGrid / (secMax - opts.secondMin); + + $tp.find(".ui_tpicker_second table").css({ + 'width': size + "%", + 'margin-left': (size / (-2 * secondGridSize)) + "%", + 'border-collapse': 'collapse' + }); + $tp.find(".ui_tpicker_second td").each( + function(index) + { + $(this).click( + function() + { + tp_inst.second_slider.slider("option", "value", $(this).html()); + tp_inst.onTimeChange(dp_inst, tp_inst); + } + ); + $(this).css({ + 'cursor': "pointer", + 'width': (100 / secondGridSize) + '%', + 'text-align': 'center', + 'overflow': 'hidden' + }); + } + ); + } + $dp.find('.ui-datepicker-calendar').after($tp); - - tp_inst.$timeObj = $('#ui_tpicker_time_'+ dp_inst.id); - if (dp_inst !== null) { + tp_inst.$timeObj = $('#ui_tpicker_time_' + dp_inst.id); + + if (dp_inst !== null) + { var timeDefined = tp_inst.timeDefined; tp_inst.onTimeChange(dp_inst, tp_inst); tp_inst.timeDefined = timeDefined; @@ -557,6 +616,16 @@ } }; + // make the alt field trigger the picker if its set + if ((opts.altField) && opts.altField != null){ + var me = $(opts.altField); + + me.css({ 'cursor': 'pointer' }); + me.focus(function(){ + input.trigger("focus"); + }); + } + tp.defaults = $.extend({}, tp.defaults, opts, { beforeShow: beforeShowFunc, onChangeMonthYear: onChangeMonthYearFunc, -- cgit v1.1