Added changes by Mikko for time grid and altField
This commit is contained in:
Trent Richardson
parent
a9dff8466d
commit
e5c7cfb697
175
jquery-ui-timepicker-addon.js
vendored
175
jquery-ui-timepicker-addon.js
vendored
|
|
@ -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;
|
||||
|
||||
|
|
@ -183,36 +181,43 @@
|
|||
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 =
|
||||
'<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>' +
|
||||
'<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;
|
||||
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 += '<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,54 +278,67 @@
|
|||
$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>' +
|
||||
'<div class="ui-datepicker-title">' + opts.timeOnlyTitle + '</div>' +
|
||||
'</div>');
|
||||
$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
|
||||
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)
|
||||
{
|
||||
|
|
@ -326,17 +346,19 @@
|
|||
function()
|
||||
{
|
||||
var h = $(this).html();
|
||||
if(opts.ampm)
|
||||
if (opts.ampm)
|
||||
{
|
||||
var ap = h.substring(2).toLowerCase();
|
||||
var aph = new Number(h.substring(0,2));
|
||||
var aph = new Number(h.substring(0, 2));
|
||||
|
||||
if(ap == 'a'){
|
||||
if(aph == 12)
|
||||
if (ap == 'a')
|
||||
{
|
||||
if (aph == 12)
|
||||
h = 0;
|
||||
else h = aph;
|
||||
}else{
|
||||
if(aph == 12)
|
||||
} 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);
|
||||
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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue