deac/jQuery-Timepicker-Addon
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Added changes by Mikko for time grid and altField

Browse source
This commit is contained in:
Trent Richardson 2010-10-21 08:32:23 -04:00
parent a9dff8466d
commit e5c7cfb697
1 changed files with 193 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

317
jquery-ui-timepicker-addon.js vendored
View file

@ -1,8 +1,8 @@
/* /*
* jQuery timepicker addon * jQuery timepicker addon
* By: Trent Richardson [http://trentrichardson.com] * By: Trent Richardson [http://trentrichardson.com]
* Version 0.7.1 * Version 0.7.2
* Last Modified: 10/7/2010 * Last Modified: 10/21/2010
* *
* Copyright 2010 Trent Richardson * Copyright 2010 Trent Richardson
* Dual licensed under the MIT and GPL licenses. * Dual licensed under the MIT and GPL licenses.
@ -14,9 +14,6 @@
* .ui-timepicker-div dl{ text-align: left; } * .ui-timepicker-div dl{ text-align: left; }
* .ui-timepicker-div dl dt{ height: 25px; } * .ui-timepicker-div dl dt{ height: 25px; }
* .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; } * .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%; } * .ui-timepicker-div td { font-size: 90%; }
*/ */
@ -171,7 +168,8 @@
//######################################################################## //########################################################################
// generate and inject html for timepicker into ui datepicker // 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 $dp = dp_inst.dpDiv;
var opts = tp_inst.defaults; var opts = tp_inst.defaults;
@ -179,209 +177,270 @@
// - Figure out what the hour/minute/second max should be based on the step values. // - Figure out what the hour/minute/second max should be based on the step values.
// - Example: if stepMinute is 15, then minMax is 45. // - Example: if stepMinute is 15, then minMax is 45.
var hourMax = opts.hourMax - (opts.hourMax % opts.stepHour); var hourMax = opts.hourMax - (opts.hourMax % opts.stepHour);
var minMax = opts.minuteMax - (opts.minuteMax % opts.stepMinute); var minMax = opts.minuteMax - (opts.minuteMax % opts.stepMinute);
var secMax = opts.secondMax - (opts.secondMax % opts.stepSecond); var secMax = opts.secondMax - (opts.secondMax % opts.stepSecond);
// Prevent displaying twice // 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 noDisplay = ' style="display:none;"';
var html = var html =
'<div class="ui-timepicker-div" id="ui-timepicker-div-' + dp_inst.id + '"><dl>' + '<div class="ui-timepicker-div" id="ui-timepicker-div-' + dp_inst.id + '"><dl>' +
'<dt class="ui_tpicker_time_label" id="ui_tpicker_time_label_' + dp_inst.id + '"' + ((opts.showTime) ? '' : noDisplay) + '>' + opts.timeText + '</dt>' + '<dt class="ui_tpicker_time_label" id="ui_tpicker_time_label_' + dp_inst.id + '"' + ((opts.showTime) ? '' : noDisplay) + '>' + opts.timeText + '</dt>' +
'<dd class="ui_tpicker_time" id="ui_tpicker_time_' + dp_inst.id + '"' + ((opts.showTime) ? '' : noDisplay) + '></dd>' + '<dd class="ui_tpicker_time" id="ui_tpicker_time_' + dp_inst.id + '"' + ((opts.showTime) ? '' : noDisplay) + '></dd>' +
'<dt class="ui_tpicker_hour_label" id="ui_tpicker_hour_label_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '>' + opts.hourText + '</dt>'; '<dt class="ui_tpicker_hour_label" id="ui_tpicker_hour_label_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '>' + opts.hourText + '</dt>';
var hourGridSize = 0;
if (opts.hourGrid > 0) var minuteGridSize = 0;
{ var secondGridSize = 0;
html += '<dd class="ui_tpicker_hour ui_tpicker_hour_' + opts.hourGrid + '">' +
'<div id="ui_tpicker_hour_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '></div>' +
'<div><table><tr>';
for (var h = opts.hourMin; h < hourMax; h += opts.hourGrid)
{
var tmph = h;
if(opts.ampm && h > 12)
tmph = h-12;
else tmph = h;
if(tmph < 10) if (opts.showHour && opts.hourGrid > 0)
{
html += '<dd class="ui_tpicker_hour">' +
'<div id="ui_tpicker_hour_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '></div>' +
'<div style="padding-left: 1px"><table><tr>';
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 (tmph < 10)
tmph = '0' + tmph; tmph = '0' + tmph;
if(opts.ampm) if (opts.ampm)
{ {
if(h == 0) if (h == 0)
tmph = 12 +'a'; tmph = 12 + 'a';
else if(h < 12) else if (h < 12)
tmph += 'a'; tmph += 'a';
else tmph += 'p'; else
tmph += 'p';
} }
html += '<td>' + tmph + '</td>'; html += '<td>' + tmph + '</td>';
} }
html += '</tr></table></div>' + html += '</tr></table></div>' +
'</dd>'; '</dd>';
} }
else else
{ {
html += '<dd class="ui_tpicker_hour" id="ui_tpicker_hour_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '></dd>'; html += '<dd class="ui_tpicker_hour" id="ui_tpicker_hour_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '></dd>';
} }
html += '<dt class="ui_tpicker_minute_label" id="ui_tpicker_minute_label_' + dp_inst.id + '"' + ((opts.showMinute) ? '' : noDisplay) + '>' + opts.minuteText + '</dt>'; html += '<dt class="ui_tpicker_minute_label" id="ui_tpicker_minute_label_' + dp_inst.id + '"' + ((opts.showMinute) ? '' : noDisplay) + '>' + opts.minuteText + '</dt>';
if (opts.minuteGrid > 0) if (opts.showMinute && opts.minuteGrid > 0)
{ {
html += '<dd class="ui_tpicker_minute ui_tpicker_minute_' + opts.minuteGrid + '">' + html += '<dd class="ui_tpicker_minute">' +
'<div id="ui_tpicker_minute_' + dp_inst.id + '"' + ((opts.showMinute) ? '' : noDisplay) + '></div>' + '<div id="ui_tpicker_minute_' + dp_inst.id + '"' + ((opts.showMinute) ? '' : noDisplay) + '></div>' +
'<div><table><tr>'; '<div style="padding-left: 1px"><table><tr>';
for (var m = opts.minuteMin; m < minMax; m += opts.minuteGrid) for (var m = 0; m <= minMax; m += opts.minuteGrid)
{ {
minuteGridSize++;
html += '<td>' + ((m < 10) ? '0' : '') + m + '</td>'; html += '<td>' + ((m < 10) ? '0' : '') + m + '</td>';
} }
html += '</tr></table></div>' + html += '</tr></table></div>' +
'</dd>'; '</dd>';
} }
else else
{ {
html += '<dd class="ui_tpicker_minute" id="ui_tpicker_minute_' + dp_inst.id + '"' + ((opts.showMinute) ? '' : noDisplay) + '></dd>' html += '<dd class="ui_tpicker_minute" id="ui_tpicker_minute_' + dp_inst.id + '"' + ((opts.showMinute) ? '' : noDisplay) + '></dd>'
} }
html += '<dt class="ui_tpicker_second_label" id="ui_tpicker_second_label_' + dp_inst.id + '"' + ((opts.showSecond) ? '' : noDisplay) + '>' + opts.secondText + '</dt>'; html += '<dt class="ui_tpicker_second_label" id="ui_tpicker_second_label_' + dp_inst.id + '"' + ((opts.showSecond) ? '' : noDisplay) + '>' + opts.secondText + '</dt>';
if (opts.secondGrid > 0) if (opts.showSecond && opts.secondGrid > 0)
{ {
html += '<dd class="ui_tpicker_second ui_tpicker_second_' + opts.secondGrid + '">' + html += '<dd class="ui_tpicker_second">' +
'<div id="ui_tpicker_second_' + dp_inst.id + '"' + ((opts.showSecond) ? '' : noDisplay) + '></div>' + '<div id="ui_tpicker_second_' + dp_inst.id + '"' + ((opts.showSecond) ? '' : noDisplay) + '></div>' +
'<table><table><tr>'; '<div style="padding-left: 1px"><table><tr>';
for (var s = opts.secondMin; s < secMax; s += opts.secondGrid) for (var s = 0; s <= secMax; s += opts.secondGrid)
{ {
secondGridSize++;
html += '<td>' + ((s < 10) ? '0' : '') + s + '</td>'; html += '<td>' + ((s < 10) ? '0' : '') + s + '</td>';
} }
html += '</tr></table></table>' + html += '</tr></table></div>' +
'</dd>'; '</dd>';
} }
else else
{ {
html += '<dd class="ui_tpicker_second" id="ui_tpicker_second_' + dp_inst.id + '"' + ((opts.showSecond) ? '' : noDisplay) + '></dd>'; html += '<dd class="ui_tpicker_second" id="ui_tpicker_second_' + dp_inst.id + '"' + ((opts.showSecond) ? '' : noDisplay) + '></dd>';
} }
html += '</dl></div>'; html += '</dl></div>';
$tp = $(html); $tp = $(html);
// if we only want time picker... // if we only want time picker...
if (opts.timeOnly === true) { if (opts.timeOnly === true)
{
$tp.prepend( $tp.prepend(
'<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' + '<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' +
'<div class="ui-datepicker-title">'+ opts.timeOnlyTitle +'</div>' + '<div class="ui-datepicker-title">' + opts.timeOnlyTitle + '</div>' +
'</div>'); '</div>');
$dp.find('.ui-datepicker-header, .ui-datepicker-calendar').hide(); $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", orientation: "horizontal",
value: tp_inst.hour, value: tp_inst.hour,
min: opts.hourMin, min: opts.hourMin,
max: hourMax, max: hourMax,
step: opts.stepHour, step: opts.stepHour,
slide: function(event, ui) { slide: function(event, ui)
tp_inst.hour_slider.slider( "option", "value", ui.value ); {
tp_inst.hour_slider.slider("option", "value", ui.value);
tp_inst.onTimeChange(dp_inst, tp_inst); tp_inst.onTimeChange(dp_inst, tp_inst);
} }
}); });
// Updated by Peter Medeiros: // Updated by Peter Medeiros:
// - Pass in Event and UI instance into slide function // - 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", orientation: "horizontal",
value: tp_inst.minute, value: tp_inst.minute,
min: opts.minuteMin, min: opts.minuteMin,
max: minMax, max: minMax,
step: opts.stepMinute, step: opts.stepMinute,
slide: function(event, ui) { slide: function(event, ui)
{
// update the global minute slider instance value with the current slider value // 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.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", orientation: "horizontal",
value: tp_inst.second, value: tp_inst.second,
min: opts.secondMin, min: opts.secondMin,
max: secMax, max: secMax,
step: opts.stepSecond, step: opts.stepSecond,
slide: function(event, ui) { slide: function(event, ui)
tp_inst.second_slider.slider( "option", "value", ui.value ); {
tp_inst.second_slider.slider("option", "value", ui.value);
tp_inst.onTimeChange(dp_inst, tp_inst); tp_inst.onTimeChange(dp_inst, tp_inst);
} }
}); });
// Add grid functionality // Add grid functionality
$tp.find(".ui_tpicker_hour td").each( if (opts.showHour && opts.hourGrid > 0)
function(index) {
{ var size = 100 * hourGridSize * opts.hourGrid / (hourMax - opts.hourMin);
$(this).click(
function() $tp.find(".ui_tpicker_hour table").css({
{ 'width': size + "%",
var h = $(this).html(); 'margin-left': (size / (-2 * hourGridSize)) + "%",
if(opts.ampm) 'border-collapse': 'collapse'
});
$tp.find(".ui_tpicker_hour td").each(
function(index)
{
$(this).click(
function()
{ {
var ap = h.substring(2).toLowerCase(); var h = $(this).html();
var aph = new Number(h.substring(0,2)); if (opts.ampm)
{
var ap = h.substring(2).toLowerCase();
var aph = new Number(h.substring(0, 2));
if(ap == 'a'){ if (ap == 'a')
if(aph == 12) {
h = 0; if (aph == 12)
else h = aph; h = 0;
}else{ else h = aph;
if(aph == 12) } else
h = 12; {
else h = aph + 12; 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': (100 / hourGridSize) + '%',
'text-align': 'center',
$(this).css({ 'cursor': "pointer", 'width': '1%', 'text-align': 'left' }); 'overflow': 'hidden'
} });
); }
$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' });
}
);
$dp.find('.ui-datepicker-calendar').after($tp);
tp_inst.$timeObj = $('#ui_tpicker_time_'+ dp_inst.id);
if (dp_inst !== null) { 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)
{
var timeDefined = tp_inst.timeDefined; var timeDefined = tp_inst.timeDefined;
tp_inst.onTimeChange(dp_inst, tp_inst); tp_inst.onTimeChange(dp_inst, tp_inst);
tp_inst.timeDefined = timeDefined; 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, { tp.defaults = $.extend({}, tp.defaults, opts, {
beforeShow: beforeShowFunc, beforeShow: beforeShowFunc,
onChangeMonthYear: onChangeMonthYearFunc, onChangeMonthYear: onChangeMonthYearFunc,