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

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

@ -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;
@ -190,19 +188,25 @@
'<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>' +
'<dt class="ui_tpicker_hour_label" id="ui_tpicker_hour_label_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '>' + opts.hourText + '</dt>';
var hourGridSize = 0;
var minuteGridSize = 0;
var secondGridSize = 0;
if (opts.hourGrid > 0)
if (opts.showHour && opts.hourGrid > 0)
{
html += '<dd class="ui_tpicker_hour ui_tpicker_hour_' + opts.hourGrid + '">' +
html += '<dd class="ui_tpicker_hour">' +
'<div id="ui_tpicker_hour_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '></div>' +
'<div><table><tr>';
'<div style="padding-left: 1px"><table><tr>';
for (var h = opts.hourMin; h < hourMax; h += opts.hourGrid)
for (var h = 0; h <= hourMax; h += opts.hourGrid)
{
hourGridSize++;
var tmph = h;
if (opts.ampm && h > 12)
tmph = h - 12;
else tmph = h;
else
tmph = h;
if (tmph < 10)
tmph = '0' + tmph;
@ -212,7 +216,8 @@
tmph = 12 + 'a';
else if (h < 12)
tmph += 'a';
else tmph += 'p';
else
tmph += 'p';
}
html += '<td>' + tmph + '</td>';
}
@ -227,14 +232,15 @@
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><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>';
}
@ -248,18 +254,19 @@
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>' +
'<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 += '</tr></table></table>' +
html += '</tr></table></div>' +
'</dd>';
}
else
@ -271,7 +278,8 @@
$tp = $(html);
// if we only want time picker...
if (opts.timeOnly === true) {
if (opts.timeOnly === true)
{
$tp.prepend(
'<div class="ui-widget-header ui-helper-clearfix ui-corner-all">' +
'<div class="ui-datepicker-title">' + opts.timeOnlyTitle + '</div>' +
@ -285,7 +293,8 @@
min: opts.hourMin,
max: hourMax,
step: opts.stepHour,
slide: function(event, ui) {
slide: function(event, ui)
{
tp_inst.hour_slider.slider("option", "value", ui.value);
tp_inst.onTimeChange(dp_inst, tp_inst);
}
@ -299,7 +308,8 @@
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.onTimeChange(dp_inst, tp_inst);
@ -312,13 +322,23 @@
min: opts.secondMin,
max: secMax,
step: opts.stepSecond,
slide: function(event, ui) {
slide: function(event, ui)
{
tp_inst.second_slider.slider("option", "value", ui.value);
tp_inst.onTimeChange(dp_inst, tp_inst);
}
});
// Add grid functionality
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)
{
@ -331,11 +351,13 @@
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;
else h = aph;
}else{
} else
{
if (aph == 12)
h = 12;
else h = aph + 12;
@ -345,10 +367,25 @@
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)
{
@ -359,10 +396,25 @@
tp_inst.onTimeChange(dp_inst, tp_inst);
}
);
$(this).css({ 'cursor': "pointer", 'width': '1%', 'text-align': 'left' });
$(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)
{
@ -373,15 +425,22 @@
tp_inst.onTimeChange(dp_inst, tp_inst);
}
);
$(this).css({ 'cursor': "pointer", 'width': '1%', 'text-align': 'left' });
$(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) {
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,