Skip to content

Commit 6ae78e0

Browse files
trentrichardsontrentrichardson
committed
Added time grid and altField by MK
1 parent 43f319f commit 6ae78e0

File tree

1 file changed

+169
-16
lines changed

1 file changed

+169
-16
lines changed

‎jquery-ui-timepicker-addon.js

Lines changed: 169 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/*
22
* jQuery timepicker addon
33
* By: Trent Richardson [http://trentrichardson.com]
4-
* Version 0.6.3
5-
* Last Modified: 10/1/2010
4+
* Version 0.6.4
5+
* Last Modified: 10/7/2010
66
*
77
* Copyright 2010 Trent Richardson
88
* Dual licensed under the MIT and GPL licenses.
@@ -13,6 +13,11 @@
1313
* .ui-timepicker-div dl{ text-align: left; }
1414
* .ui-timepicker-div dl dt{ height: 25px; }
1515
* .ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
16+
* .ui-timepicker-div div:first-child { margin-left: 0.5em; margin-right: 0px; }
17+
* .ui-timepicker-div .ui_tpicker_hour div { padding-right: 2px; }
18+
* .ui-timepicker-div .ui_tpicker_minute div { padding-right: 6px; }
19+
* .ui-timepicker-div .ui_tpicker_second div { padding-right: 6px; }
20+
* .ui-timepicker-div td { font-size: 8pt; }
1621
*/
1722

1823
(function($) {
@@ -48,6 +53,9 @@
4853
hourMax: 23,
4954
minuteMax: 59,
5055
secondMax: 59,
56+
hourGrid: 0,
57+
minuteGrid: 0,
58+
secondGrid: 0,
5159
alwaysSetTime: true
5260
};
5361
$.extend(this.defaults, this.regional['']);
@@ -59,6 +67,7 @@
5967

6068
Timepicker.prototype = {
6169
$input: null,
70+
$altInput: null,
6271
$timeObj: null,
6372
inst: null,
6473
hour_slider: null,
@@ -77,7 +86,15 @@
7786
//########################################################################
7887
addTimePicker: function(dp_inst) {
7988
var tp_inst = this;
80-
var currDT = this.$input.val();
89+
var currDT
90+
if ((this.$altInput) && this.$altInput != null)
91+
{
92+
currDT = this.$input.val() + ' ' + this.$altInput.val();
93+
}
94+
else
95+
{
96+
currDT = this.$input.val();
97+
}
8198
var regstr = this.defaults.timeFormat.toString()
8299
.replace(/h{1,2}/ig, '(\\d?\\d)')
83100
.replace(/m{1,2}/ig, '(\\d?\\d)')
@@ -169,16 +186,88 @@
169186
if ($dp.find("div#ui-timepicker-div-"+ dp_inst.id).length === 0) {
170187
var noDisplay = ' style="display:none;"';
171188
var html =
172-
'<div class="ui-timepicker-div" id="ui-timepicker-div-'+ dp_inst.id +'"><dl>' +
173-
'<dt class="ui_tpicker_time_label" id="ui_tpicker_time_label_'+ dp_inst.id +'"' + ((opts.showTime) ? '' : noDisplay) + '>'+ opts.timeText +'</dt>' +
174-
'<dd class="ui_tpicker_time" id="ui_tpicker_time_'+ dp_inst.id +'"' + ((opts.showTime) ? '' : noDisplay) + '></dd>' +
175-
'<dt class="ui_tpicker_hour_label" id="ui_tpicker_hour_label_'+ dp_inst.id +'"' + ((opts.showHour) ? '' : noDisplay) + '>'+ opts.hourText +'</dt>' +
176-
'<dd class="ui_tpicker_hour" id="ui_tpicker_hour_'+ dp_inst.id +'"' + ((opts.showHour) ? '' : noDisplay) + '></dd>' +
177-
'<dt class="ui_tpicker_minute_label" id="ui_tpicker_minute_label_'+ dp_inst.id +'"' + ((opts.showMinute) ? '' : noDisplay) + '>'+ opts.minuteText +'</dt>' +
178-
'<dd class="ui_tpicker_minute" id="ui_tpicker_minute_'+ dp_inst.id +'"' + ((opts.showMinute) ? '' : noDisplay) + '></dd>' +
179-
'<dt class="ui_tpicker_second_label" id="ui_tpicker_second_label_'+ dp_inst.id +'"' + ((opts.showSecond) ? '' : noDisplay) + '>'+ opts.secondText +'</dt>' +
180-
'<dd class="ui_tpicker_second" id="ui_tpicker_second_'+ dp_inst.id +'"' + ((opts.showSecond) ? '' : noDisplay) + '></dd>' +
181-
'</dl></div>';
189+
'<div class="ui-timepicker-div" id="ui-timepicker-div-' + dp_inst.id + '"><dl>' +
190+
'<dt class="ui_tpicker_time_label" id="ui_tpicker_time_label_' + dp_inst.id + '"' + ((opts.showTime) ? '' : noDisplay) + '>' + opts.timeText + '</dt>' +
191+
'<dd class="ui_tpicker_time" id="ui_tpicker_time_' + dp_inst.id + '"' + ((opts.showTime) ? '' : noDisplay) + '></dd>' +
192+
'<dt class="ui_tpicker_hour_label" id="ui_tpicker_hour_label_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '>' + opts.hourText + '</dt>';
193+
194+
if (opts.hourGrid > 0)
195+
{
196+
html += '<dd class="ui_tpicker_hour ui_tpicker_hour_' + opts.hourGrid + '">' +
197+
'<div id="ui_tpicker_hour_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '></div>' +
198+
'<div><table><tr>';
199+
200+
for (var h = 0; h < hourMax; h += opts.hourGrid)
201+
{
202+
var tmph = h;
203+
if(opts.ampm && h > 12)
204+
tmph = h-12;
205+
else tmph = h;
206+
207+
if(tmph < 10)
208+
tmph = '0' + tmph;
209+
if(opts.ampm)
210+
{
211+
if(h == 0)
212+
tmph = 12 +'a';
213+
else if(h < 12)
214+
tmph += 'a';
215+
else tmph += 'p';
216+
}
217+
html += '<td>' + tmph + '</td>';
218+
}
219+
220+
html += '</tr></table></div>' +
221+
'</dd>';
222+
}
223+
else
224+
{
225+
html += '<dd class="ui_tpicker_hour" id="ui_tpicker_hour_' + dp_inst.id + '"' + ((opts.showHour) ? '' : noDisplay) + '></dd>';
226+
}
227+
228+
html += '<dt class="ui_tpicker_minute_label" id="ui_tpicker_minute_label_' + dp_inst.id + '"' + ((opts.showMinute) ? '' : noDisplay) + '>' + opts.minuteText + '</dt>';
229+
230+
if (opts.minuteGrid > 0)
231+
{
232+
html += '<dd class="ui_tpicker_minute ui_tpicker_minute_' + opts.minuteGrid + '">' +
233+
'<div id="ui_tpicker_minute_' + dp_inst.id + '"' + ((opts.showMinute) ? '' : noDisplay) + '></div>' +
234+
'<div><table><tr>';
235+
236+
for (var m = 0; m < minMax; m += opts.minuteGrid)
237+
{
238+
html += '<td>' + ((m < 10) ? '0' : '') + m + '</td>';
239+
}
240+
241+
html += '</tr></table></div>' +
242+
'</dd>';
243+
}
244+
else
245+
{
246+
html += '<dd class="ui_tpicker_minute" id="ui_tpicker_minute_' + dp_inst.id + '"' + ((opts.showMinute) ? '' : noDisplay) + '></dd>'
247+
}
248+
249+
html += '<dt class="ui_tpicker_second_label" id="ui_tpicker_second_label_' + dp_inst.id + '"' + ((opts.showSecond) ? '' : noDisplay) + '>' + opts.secondText + '</dt>';
250+
251+
if (opts.secondGrid > 0)
252+
{
253+
html += '<dd class="ui_tpicker_second ui_tpicker_second_' + opts.secondGrid + '">' +
254+
'<div id="ui_tpicker_second_' + dp_inst.id + '"' + ((opts.showSecond) ? '' : noDisplay) + '></div>' +
255+
'<table><table><tr>';
256+
257+
for (var s = 0; s < secMax; s += opts.secondGrid)
258+
{
259+
html += '<td>' + ((s < 10) ? '0' : '') + s + '</td>';
260+
}
261+
262+
html += '</tr></table></table>' +
263+
'</dd>';
264+
}
265+
else
266+
{
267+
html += '<dd class="ui_tpicker_second" id="ui_tpicker_second_' + dp_inst.id + '"' + ((opts.showSecond) ? '' : noDisplay) + '></dd>';
268+
}
269+
270+
html += '</dl></div>';
182271
$tp = $(html);
183272

184273
// if we only want time picker...
@@ -228,7 +317,66 @@
228317
tp_inst.onTimeChange(dp_inst, tp_inst);
229318
}
230319
});
231-
320+
321+
// Add grid functionality
322+
$tp.find(".ui_tpicker_hour td").each(
323+
function(index)
324+
{
325+
$(this).click(
326+
function()
327+
{
328+
var h = $(this).html();
329+
if(opts.ampm)
330+
{
331+
var ap = h.substring(2).toLowerCase();
332+
var aph = new Number(h.substring(0,2));
333+
334+
if(ap == 'a'){
335+
if(aph == 12)
336+
h = 0;
337+
else h = aph;
338+
}else{
339+
if(aph == 12)
340+
h = 12;
341+
else h = aph + 12;
342+
}
343+
}
344+
tp_inst.hour_slider.slider("option", "value", h);
345+
tp_inst.onTimeChange(dp_inst, tp_inst);
346+
}
347+
);
348+
349+
$(this).css({ 'cursor': "pointer", 'width': '1%', 'text-align': 'left' });
350+
}
351+
);
352+
$tp.find(".ui_tpicker_minute td").each(
353+
function(index)
354+
{
355+
$(this).click(
356+
function()
357+
{
358+
tp_inst.minute_slider.slider("option", "value", $(this).html());
359+
tp_inst.onTimeChange(dp_inst, tp_inst);
360+
}
361+
);
362+
363+
$(this).css({ 'cursor': "pointer", 'width': '1%', 'text-align': 'left' });
364+
}
365+
);
366+
$tp.find(".ui_tpicker_second td").each(
367+
function(index)
368+
{
369+
$(this).click(
370+
function()
371+
{
372+
tp_inst.second_slider.slider("option", "value", $(this).html());
373+
tp_inst.onTimeChange(dp_inst, tp_inst);
374+
}
375+
);
376+
$(this).css({ 'cursor': "pointer", 'width': '1%', 'text-align': 'left' });
377+
}
378+
);
379+
232380
$dp.find('.ui-datepicker-calendar').after($tp);
233381

234382
tp_inst.$timeObj = $('#ui_tpicker_time_'+ dp_inst.id);
@@ -313,7 +461,6 @@
313461
// update our input with the new date time..
314462
//########################################################################
315463
updateDateTime: function(dp_inst, tp_inst) {
316-
//var dt = this.$input.datepicker('getDate');
317464
var dt = new Date(dp_inst.selectedYear, dp_inst.selectedMonth, dp_inst.selectedDay);
318465
var dateFmt = $.datepicker._get(dp_inst, 'dateFormat');
319466
var formatCfg = $.datepicker._getFormatConfig(dp_inst);
@@ -327,7 +474,12 @@
327474
else if (this.defaults.timeOnly !== true && (this.defaults.alwaysSetTime || timeAvailable)) {
328475
formattedDateTime += ' ' + this.formattedTime;
329476
}
330-
477+
478+
if ((this.$altInput) && this.$altInput != null)
479+
{
480+
this.$altInput.val(formattedDateTime);
481+
}
482+
331483
this.formattedDateTime = formattedDateTime;
332484
this.$input.val(formattedDateTime);
333485
this.$input.trigger("change");
@@ -366,6 +518,7 @@
366518
tp.second = tp.defaults.second;
367519
tp.ampm = '';
368520
tp.$input = $(input);
521+
tp.$altInput = $($.datepicker._get(inst, 'altField'));
369522
tp.inst = inst;
370523
tp.addTimePicker(inst);
371524
if ($.isFunction(opts.beforeShow)) {

0 commit comments

Comments
 (0)