1
1
/*
2
2
* jQuery timepicker addon
3
3
* By: Trent Richardson [http://trentrichardson.com]
4
- * Version 0.9.7
5
- * Last Modified: 10/02 /2011
4
+ * Version 0.9.8
5
+ * Last Modified: 12/03 /2011
6
6
*
7
7
* Copyright 2011 Trent Richardson
8
8
* Dual licensed under the MIT and GPL licenses.
12
12
* HERES THE CSS:
13
13
* .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
14
14
* .ui-timepicker-div dl { text-align: left; }
15
- * .ui-timepicker-div dl dt { height: 25px; }
16
- * .ui-timepicker-div dl dd { margin: -25px 10px 10px 65px; }
15
+ * .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
16
+ * .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
17
17
* .ui-timepicker-div td { font-size: 90%; }
18
18
* .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
19
19
*/
20
20
21
21
( function ( $ ) {
22
22
23
- $ . extend ( $ . ui , { timepicker : { version : "0.9.7 " } } ) ;
23
+ $ . extend ( $ . ui , { timepicker : { version : "0.9.8 " } } ) ;
24
24
25
25
/* Time picker manager.
26
26
Use the singleton instance of this class, $.timepicker, to interact with the time picker.
@@ -54,10 +54,10 @@ function Timepicker() {
54
54
showMillisec : false ,
55
55
showTimezone : false ,
56
56
showTime : true ,
57
- stepHour : 0.05 ,
58
- stepMinute : 0.05 ,
59
- stepSecond : 0.05 ,
60
- stepMillisec : 0.5 ,
57
+ stepHour : 1 ,
58
+ stepMinute : 1 ,
59
+ stepSecond : 1 ,
60
+ stepMillisec : 1 ,
61
61
hour : 0 ,
62
62
minute : 0 ,
63
63
second : 0 ,
@@ -83,7 +83,9 @@ function Timepicker() {
83
83
altFieldTimeOnly : true ,
84
84
showTimepicker : true ,
85
85
timezoneIso8609 : false ,
86
- timezoneList : null
86
+ timezoneList : null ,
87
+ addSliderAccess : false ,
88
+ sliderAccessArgs : null
87
89
} ;
88
90
$ . extend ( this . _defaults , this . regional [ '' ] ) ;
89
91
}
@@ -341,10 +343,10 @@ $.extend(Timepicker.prototype, {
341
343
// Added by Peter Medeiros:
342
344
// - Figure out what the hour/minute/second max should be based on the step values.
343
345
// - Example: if stepMinute is 15, then minMax is 45.
344
- hourMax = ( o . hourMax - ( ( o . hourMax - o . hourMin ) % o . stepHour ) ) . toFixed ( 0 ) ,
345
- minMax = ( o . minuteMax - ( ( o . minuteMax - o . minuteMin ) % o . stepMinute ) ) . toFixed ( 0 ) ,
346
- secMax = ( o . secondMax - ( ( o . secondMax - o . secondMin ) % o . stepSecond ) ) . toFixed ( 0 ) ,
347
- millisecMax = ( o . millisecMax - ( ( o . millisecMax - o . millisecMin ) % o . stepMillisec ) ) . toFixed ( 0 ) ,
346
+ hourMax = parseInt ( ( o . hourMax - ( ( o . hourMax - o . hourMin ) % o . stepHour ) ) , 10 ) ,
347
+ minMax = parseInt ( ( o . minuteMax - ( ( o . minuteMax - o . minuteMin ) % o . stepMinute ) ) , 10 ) ,
348
+ secMax = parseInt ( ( o . secondMax - ( ( o . secondMax - o . secondMin ) % o . stepSecond ) ) , 10 ) ,
349
+ millisecMax = parseInt ( ( o . millisecMax - ( ( o . millisecMax - o . millisecMin ) % o . stepMillisec ) ) , 10 ) ,
348
350
dp_id = this . inst . id . toString ( ) . replace ( / ( [ ^ A - Z a - z 0 - 9 _ ] ) / g, '' ) ;
349
351
350
352
// Prevent displaying twice
@@ -365,10 +367,10 @@ $.extend(Timepicker.prototype, {
365
367
size ;
366
368
367
369
// Hours
370
+ html += '<dd class="ui_tpicker_hour"><div id="ui_tpicker_hour_' + dp_id + '"' +
371
+ ( ( o . showHour ) ? '' : noDisplay ) + '></div>' ;
368
372
if ( o . showHour && o . hourGrid > 0 ) {
369
- html += '<dd class="ui_tpicker_hour">' +
370
- '<div id="ui_tpicker_hour_' + dp_id + '"' + ( ( o . showHour ) ? '' : noDisplay ) + '></div>' +
371
- '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>' ;
373
+ html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>' ;
372
374
373
375
for ( var h = o . hourMin ; h <= hourMax ; h += parseInt ( o . hourGrid , 10 ) ) {
374
376
hourGridSize ++ ;
@@ -382,70 +384,63 @@ $.extend(Timepicker.prototype, {
382
384
html += '<td>' + tmph + '</td>' ;
383
385
}
384
386
385
- html += '</tr></table></div>' +
386
- '</dd>' ;
387
- } else html += '<dd class="ui_tpicker_hour" id="ui_tpicker_hour_' + dp_id + '"' +
388
- ( ( o . showHour ) ? '' : noDisplay ) + '></dd>' ;
387
+ html += '</tr></table></div>' ;
388
+ }
389
+ html += '</dd>' ;
389
390
391
+ // Minutes
390
392
html += '<dt class="ui_tpicker_minute_label" id="ui_tpicker_minute_label_' + dp_id + '"' +
391
- ( ( o . showMinute ) ? '' : noDisplay ) + '>' + o . minuteText + '</dt>' ;
393
+ ( ( o . showMinute ) ? '' : noDisplay ) + '>' + o . minuteText + '</dt>' +
394
+ '<dd class="ui_tpicker_minute"><div id="ui_tpicker_minute_' + dp_id + '"' +
395
+ ( ( o . showMinute ) ? '' : noDisplay ) + '></div>' ;
392
396
393
- // Minutes
394
397
if ( o . showMinute && o . minuteGrid > 0 ) {
395
- html += '<dd class="ui_tpicker_minute ui_tpicker_minute_' + o . minuteGrid + '">' +
396
- '<div id="ui_tpicker_minute_' + dp_id + '"' +
397
- ( ( o . showMinute ) ? '' : noDisplay ) + '></div>' +
398
- '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>' ;
398
+ html += '<div style="padding-left: 1px"><table class="ui-tpicker-grid-label"><tr>' ;
399
399
400
400
for ( var m = o . minuteMin ; m <= minMax ; m += parseInt ( o . minuteGrid , 10 ) ) {
401
401
minuteGridSize ++ ;
402
402
html += '<td>' + ( ( m < 10 ) ? '0' : '' ) + m + '</td>' ;
403
403
}
404
404
405
- html += '</tr></table></div>' +
406
- '</dd>' ;
407
- } else html += '<dd class="ui_tpicker_minute" id="ui_tpicker_minute_' + dp_id + '"' +
408
- ( ( o . showMinute ) ? '' : noDisplay ) + '></dd>' ;
405
+ html += '</tr></table></div>' ;
406
+ }
407
+ html += '</dd>' ;
409
408
410
409
// Seconds
411
410
html += '<dt class="ui_tpicker_second_label" id="ui_tpicker_second_label_' + dp_id + '"' +
412
- ( ( o . showSecond ) ? '' : noDisplay ) + '>' + o . secondText + '</dt>' ;
411
+ ( ( o . showSecond ) ? '' : noDisplay ) + '>' + o . secondText + '</dt>' +
412
+ '<dd class="ui_tpicker_second"><div id="ui_tpicker_second_' + dp_id + '"' +
413
+ ( ( o . showSecond ) ? '' : noDisplay ) + '></div>' ;
413
414
414
415
if ( o . showSecond && o . secondGrid > 0 ) {
415
- html += '<dd class="ui_tpicker_second ui_tpicker_second_' + o . secondGrid + '">' +
416
- '<div id="ui_tpicker_second_' + dp_id + '"' +
417
- ( ( o . showSecond ) ? '' : noDisplay ) + '></div>' +
418
- '<div style="padding-left: 1px"><table><tr>' ;
416
+ html += '<div style="padding-left: 1px"><table><tr>' ;
419
417
420
418
for ( var s = o . secondMin ; s <= secMax ; s += parseInt ( o . secondGrid , 10 ) ) {
421
419
secondGridSize ++ ;
422
420
html += '<td>' + ( ( s < 10 ) ? '0' : '' ) + s + '</td>' ;
423
421
}
424
422
425
- html += '</tr></table></div>' +
426
- '</dd>' ;
427
- } else html += '<dd class="ui_tpicker_second" id="ui_tpicker_second_' + dp_id + '"' +
428
- ( ( o . showSecond ) ? '' : noDisplay ) + '></dd>' ;
423
+ html += '</tr></table></div>' ;
424
+ }
425
+ html += '</dd>' ;
429
426
430
427
// Milliseconds
431
428
html += '<dt class="ui_tpicker_millisec_label" id="ui_tpicker_millisec_label_' + dp_id + '"' +
432
- ( ( o . showMillisec ) ? '' : noDisplay ) + '>' + o . millisecText + '</dt>' ;
429
+ ( ( o . showMillisec ) ? '' : noDisplay ) + '>' + o . millisecText + '</dt>' +
430
+ '<dd class="ui_tpicker_millisec"><div id="ui_tpicker_millisec_' + dp_id + '"' +
431
+ ( ( o . showMillisec ) ? '' : noDisplay ) + '></div>' ;
433
432
434
433
if ( o . showMillisec && o . millisecGrid > 0 ) {
435
- html += '<dd class="ui_tpicker_millisec ui_tpicker_millisec_' + o . millisecGrid + '">' +
436
- '<div id="ui_tpicker_millisec_' + dp_id + '"' +
437
- ( ( o . showMillisec ) ? '' : noDisplay ) + '></div>' +
438
- '<div style="padding-left: 1px"><table><tr>' ;
434
+ html += '<div style="padding-left: 1px"><table><tr>' ;
439
435
440
436
for ( var l = o . millisecMin ; l <= millisecMax ; l += parseInt ( o . millisecGrid , 10 ) ) {
441
437
millisecGridSize ++ ;
442
- html += '<td>' + ( ( l < 10 ) ? '0' : '' ) + s + '</td>' ;
438
+ html += '<td>' + ( ( l < 10 ) ? '0' : '' ) + l + '</td>' ;
443
439
}
444
440
445
- html += '</tr></table></div>' +
446
- '</dd>' ;
447
- } else html += '<dd class="ui_tpicker_millisec" id="ui_tpicker_millisec_' + dp_id + '"' +
448
- ( ( o . showMillisec ) ? '' : noDisplay ) + '></dd>' ;
441
+ html += '</tr></table></div>' ;
442
+ }
443
+ html += '</dd>' ;
449
444
450
445
// Timezone
451
446
html += '<dt class="ui_tpicker_timezone_label" id="ui_tpicker_timezone_label_' + dp_id + '"' +
@@ -477,6 +472,7 @@ $.extend(Timepicker.prototype, {
477
472
}
478
473
} ) ;
479
474
475
+
480
476
// Updated by Peter Medeiros:
481
477
// - Pass in Event and UI instance into slide function
482
478
this . minute_slider = $tp . find ( '#ui_tpicker_minute_' + dp_id ) . slider ( {
@@ -486,7 +482,6 @@ $.extend(Timepicker.prototype, {
486
482
max : minMax ,
487
483
step : o . stepMinute ,
488
484
slide : function ( event , ui ) {
489
- // update the global minute slider instance value with the current slider value
490
485
tp_inst . minute_slider . slider ( "option" , "value" , ui . value ) ;
491
486
tp_inst . _onTimeChange ( ) ;
492
487
}
@@ -639,6 +634,30 @@ $.extend(Timepicker.prototype, {
639
634
this . minute_slider . bind ( 'slidestop' , onSelectDelegate ) ;
640
635
this . second_slider . bind ( 'slidestop' , onSelectDelegate ) ;
641
636
this . millisec_slider . bind ( 'slidestop' , onSelectDelegate ) ;
637
+
638
+ // slideAccess integration: http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/
639
+ if ( this . _defaults . addSliderAccess ) {
640
+ var sliderAccessArgs = this . _defaults . sliderAccessArgs ;
641
+ setTimeout ( function ( ) { // fix for inline mode
642
+ $tp . find ( '.ui-slider:visible' ) . sliderAccess ( sliderAccessArgs ) ;
643
+
644
+ // fix any grids since sliders are shorter
645
+ var sliderAccessWidth = $tp . find ( '.ui-slider-access:eq(0)' ) . outerWidth ( true ) ;
646
+ if ( sliderAccessWidth ) {
647
+ $tp . find ( 'table:visible' ) . each ( function ( ) {
648
+ var $g = $ ( this ) ,
649
+ oldWidth = $g . outerWidth ( ) ,
650
+ oldMarginLeft = $g . css ( 'marginLeft' ) . toString ( ) . replace ( '%' , '' ) ,
651
+ newWidth = oldWidth - sliderAccessWidth ,
652
+ newMarginLeft = ( ( oldMarginLeft * newWidth ) / oldWidth ) + '%' ;
653
+
654
+ $g . css ( { width : newWidth , marginLeft : newMarginLeft } ) ;
655
+ } ) ;
656
+ }
657
+ } , 0 ) ;
658
+ }
659
+ // end slideAccess integration
660
+
642
661
}
643
662
} ,
644
663
@@ -732,10 +751,10 @@ $.extend(Timepicker.prototype, {
732
751
}
733
752
734
753
if ( adjustSliders !== undefined && adjustSliders === true ) {
735
- var hourMax = ( this . _defaults . hourMax - ( ( this . _defaults . hourMax - this . _defaults . hourMin ) % this . _defaults . stepHour ) ) . toFixed ( 0 ) ,
736
- minMax = ( this . _defaults . minuteMax - ( ( this . _defaults . minuteMax - this . _defaults . minuteMin ) % this . _defaults . stepMinute ) ) . toFixed ( 0 ) ,
737
- secMax = ( this . _defaults . secondMax - ( ( this . _defaults . secondMax - this . _defaults . secondMin ) % this . _defaults . stepSecond ) ) . toFixed ( 0 ) ,
738
- millisecMax = ( this . _defaults . millisecMax - ( ( this . _defaults . millisecMax - this . _defaults . millisecMin ) % this . _defaults . stepMillisec ) ) . toFixed ( 0 ) ;
754
+ var hourMax = parseInt ( ( this . _defaults . hourMax - ( ( this . _defaults . hourMax - this . _defaults . hourMin ) % this . _defaults . stepHour ) ) , 10 ) ,
755
+ minMax = parseInt ( ( this . _defaults . minuteMax - ( ( this . _defaults . minuteMax - this . _defaults . minuteMin ) % this . _defaults . stepMinute ) ) , 10 ) ,
756
+ secMax = parseInt ( ( this . _defaults . secondMax - ( ( this . _defaults . secondMax - this . _defaults . secondMin ) % this . _defaults . stepSecond ) ) , 10 ) ,
757
+ millisecMax = parseInt ( ( this . _defaults . millisecMax - ( ( this . _defaults . millisecMax - this . _defaults . millisecMin ) % this . _defaults . stepMillisec ) ) , 10 ) ;
739
758
740
759
if ( this . hour_slider )
741
760
this . hour_slider . slider ( "option" , { min : this . _defaults . hourMin , max : hourMax } ) . slider ( 'value' , this . hour ) ;
@@ -859,8 +878,8 @@ $.extend(Timepicker.prototype, {
859
878
// update our input with the new date time..
860
879
//########################################################################
861
880
_updateDateTime : function ( dp_inst ) {
862
- dp_inst = this . inst || dp_inst ,
863
- dt = new Date ( dp_inst . selectedYear , dp_inst . selectedMonth , dp_inst . selectedDay ) ,
881
+ dp_inst = this . inst || dp_inst ;
882
+ var dt = $ . datepicker . _daylightSavingAdjust ( new Date ( dp_inst . selectedYear , dp_inst . selectedMonth , dp_inst . selectedDay ) ) ,
864
883
dateFmt = $ . datepicker . _get ( dp_inst , 'dateFormat' ) ,
865
884
formatCfg = $ . datepicker . _getFormatConfig ( dp_inst ) ,
866
885
timeAvailable = dt !== null && this . timeDefined ;
@@ -1204,7 +1223,7 @@ $.datepicker._formatDate = function(inst, day, month, year){
1204
1223
{
1205
1224
if ( day )
1206
1225
var b = this . _base_formatDate ( inst , day , month , year ) ;
1207
- tp_inst . _updateDateTime ( ) ;
1226
+ tp_inst . _updateDateTime ( inst ) ;
1208
1227
return tp_inst . $input . val ( ) ;
1209
1228
}
1210
1229
return this . _base_formatDate ( inst ) ;
@@ -1270,7 +1289,7 @@ function extendRemove(target, props) {
1270
1289
}
1271
1290
1272
1291
$ . timepicker = new Timepicker ( ) ; // singleton instance
1273
- $ . timepicker . version = "0.9.7 " ;
1292
+ $ . timepicker . version = "0.9.8 " ;
1274
1293
1275
1294
} ) ( jQuery ) ;
1276
1295
0 commit comments