Skip to content

Commit 9e70b34

Browse files
beakersoftbeakersoft
committed
Added millisecond option
1 parent 204b16a commit 9e70b34

File tree

1 file changed

+98
-21
lines changed

1 file changed

+98
-21
lines changed

‎jquery-ui-timepicker-addon.js‎

Lines changed: 98 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
* jQuery timepicker addon
33
* By: Trent Richardson [http://trentrichardson.com]
44
* Version 0.9.5
5-
* Last Modified: 05/25/2011
65
*
6+
* Fork by Luke Niland [http://beakersoft.co.uk]
7+
* Modified to include a slider for millseconds
8+
*
79
* Copyright 2011 Trent Richardson
810
* Dual licensed under the MIT and GPL licenses.
911
* http://trentrichardson.com/Impromptu/GPL-LICENSE.txt
@@ -53,16 +55,16 @@ function Timepicker() {
5355
stepHour: 0.05,
5456
stepMinute: 0.05,
5557
stepSecond: 0.05,
56-
stepMillisec: 100,
58+
stepMillisec: 0.05,
5759
hour: 0,
5860
minute: 0,
5961
second: 0,
60-
millisecond: 0,
62+
millisecond: 000,
6163
timezone: '+0000',
6264
hourMin: 0,
6365
minuteMin: 0,
6466
secondMin: 0,
65-
millisecMin: 0,
67+
millisecMin: 000,
6668
hourMax: 23,
6769
minuteMax: 59,
6870
secondMax: 59,
@@ -72,6 +74,7 @@ function Timepicker() {
7274
hourGrid: 0,
7375
minuteGrid: 0,
7476
secondGrid: 0,
77+
millisecGrid: 0,
7578
alwaysSetTime: true,
7679
separator: ' ',
7780
altFieldTimeOnly: true,
@@ -163,7 +166,7 @@ $.extend(Timepicker.prototype, {
163166
tp_inst.hour = tp_inst._defaults.hour;
164167
tp_inst.minute = tp_inst._defaults.minute;
165168
tp_inst.second = tp_inst._defaults.second;
166-
tp_inst.millisecond = tp_inst.defaults.millisecond;
169+
tp_inst.millisecond = tp_inst._defaults.millisecond;
167170
tp_inst.ampm = '';
168171
tp_inst.$input = $input;
169172

@@ -274,9 +277,10 @@ $.extend(Timepicker.prototype, {
274277
// Added by Peter Medeiros:
275278
// - Figure out what the hour/minute/second max should be based on the step values.
276279
// - Example: if stepMinute is 15, then minMax is 45.
277-
hourMax = (o.hourMax - (o.hourMax % o.stepHour)).toFixed(0),
278-
minMax = (o.minuteMax - (o.minuteMax % o.stepMinute)).toFixed(0),
279-
secMax = (o.secondMax - (o.secondMax % o.stepSecond)).toFixed(0),
280+
hourMax = (o.hourMax - (o.hourMax % o.stepHour)).toFixed(0),
281+
minMax = (o.minuteMax - (o.minuteMax % o.stepMinute)).toFixed(0),
282+
secMax = (o.secondMax - (o.secondMax % o.stepSecond)).toFixed(0),
283+
milliSecMax = (o.millisecMax - (o.millisecMax % o.stepMillisec)).toFixed(0),
280284
dp_id = this.inst.id.toString().replace(/([^A-Za-z0-9_])/g, '');
281285

282286
// Prevent displaying twice
@@ -293,6 +297,7 @@ $.extend(Timepicker.prototype, {
293297
hourGridSize = 0,
294298
minuteGridSize = 0,
295299
secondGridSize = 0,
300+
millisecGridSize = 0,
296301
size;
297302

298303
if (o.showHour && o.hourGrid > 0) {
@@ -354,7 +359,27 @@ $.extend(Timepicker.prototype, {
354359
'</dd>';
355360
} else html += '<dd class="ui_tpicker_second" id="ui_tpicker_second_' + dp_id + '"' +
356361
((o.showSecond) ? '' : noDisplay) + '></dd>';
362+
363+
//show the milliseconds
364+
html += '<dt class="ui_tpicker_millisecond_label" id="ui_tpicker_millisecond_label_' + dp_id + '"' +
365+
((o.showMillisec) ? '' : noDisplay) + '>' + o.millisecText + '</dt>';
357366

367+
if (o.showMillisec && o.millisecGrid > 0) {
368+
html += '<dd class="ui_tpicker_millisecond ui_tpicker_millisecond_' + o.millisecGrid + '">' +
369+
'<div id="ui_tpicker_millisecond_' + dp_id + '"' +
370+
((o.showMillisec) ? '' : noDisplay) + '></div>' +
371+
'<div style="padding-left: 1px"><table><tr>';
372+
373+
for (var s = o.millisecMin; s < millisecMax; s += o.millisecGrid) {
374+
millisecGridSize++;
375+
html += '<td>' + ((s < 10) ? '0' : '') + s + '</td>';
376+
}
377+
378+
html += '</tr></table></div>' +
379+
'</dd>';
380+
} else html += '<dd class="ui_tpicker_millisecond" id="ui_tpicker_millisecond_' + dp_id + '"' +
381+
((o.showMillisec) ? '' : noDisplay) + '></dd>';
382+
358383
html += '<dt class="ui_tpicker_timezone_label" id="ui_tpicker_timezone_label_' + dp_id + '"' +
359384
((o.showTimezone) ? '' : noDisplay) + '>' + o.timezoneText + '</dt>';
360385
html += '<dd class="ui_tpicker_timezone" id="ui_tpicker_timezone_' + dp_id + '"' +
@@ -410,7 +435,18 @@ $.extend(Timepicker.prototype, {
410435
tp_inst._onTimeChange();
411436
}
412437
});
413-
438+
439+
this.millisecond_slider = $tp.find('#ui_tpicker_millisecond_'+ dp_id).slider({
440+
orientation: "horizontal",
441+
value: this.millisecond,
442+
min: o.millisecMin,
443+
max: milliSecMax,
444+
step: o.stepMillisec,
445+
slide: function(event, ui) {
446+
tp_inst.millisecond_slider.slider( "option", "value", ui.value);
447+
tp_inst._onTimeChange();
448+
}
449+
});
414450

415451
this.timezone_select = $tp.find('#ui_tpicker_timezone_'+ dp_id).append('<select></select>').find("select");
416452
$.fn.append.apply(this.timezone_select,
@@ -496,6 +532,26 @@ $.extend(Timepicker.prototype, {
496532
});
497533
}
498534

535+
//add the millisecond functionality
536+
if (o.showMillisec && o.millisecGrid > 0) {
537+
$tp.find(".ui_tpicker_millisecond table").css({
538+
width: size + "%",
539+
marginLeft: (size / (-2 * millisecGridSize)) + "%",
540+
borderCollapse: 'collapse'
541+
}).find("td").each(function(index) {
542+
$(this).click(function() {
543+
tp_inst.millisecond_slider.slider("option", "value", $(this).html());
544+
tp_inst._onTimeChange();
545+
tp_inst._onSelectHandler();
546+
}).css({
547+
cursor: 'pointer',
548+
width: (100 / millisecGridSize) + '%',
549+
textAlign: 'center',
550+
overflow: 'hidden'
551+
});
552+
});
553+
}
554+
499555
var $buttonPanel = $dp.find('.ui-datepicker-buttonpane');
500556
if ($buttonPanel.length) $buttonPanel.before($tp);
501557
else $dp.append($tp);
@@ -515,6 +571,7 @@ $.extend(Timepicker.prototype, {
515571
this.hour_slider.bind('slidestop',onSelectDelegate);
516572
this.minute_slider.bind('slidestop',onSelectDelegate);
517573
this.second_slider.bind('slidestop',onSelectDelegate);
574+
this.millisecond_slider.bind('slidestop',onSelectDelegate);
518575
}
519576
},
520577

@@ -532,10 +589,11 @@ $.extend(Timepicker.prototype, {
532589
var minDateTime = this._defaults.minDateTime,
533590
minDateTimeDate = new Date(minDateTime.getFullYear(), minDateTime.getMonth(), minDateTime.getDate(), 0, 0, 0, 0);
534591

535-
if(this.hourMinOriginal === null || this.minuteMinOriginal === null || this.secondMinOriginal === null){
592+
if(this.hourMinOriginal === null || this.minuteMinOriginal === null || this.secondMinOriginal === null || this.millisecondMinOriginal === null){
536593
this.hourMinOriginal = o.hourMin;
537594
this.minuteMinOriginal = o.minuteMin;
538595
this.secondMinOriginal = o.secondMin;
596+
this.millisecondMinOriginal = o.millisecMin;
539597
}
540598

541599
if(dp_inst.settings.timeOnly || minDateTimeDate.getTime() == dp_date.getTime()) {
@@ -546,29 +604,35 @@ $.extend(Timepicker.prototype, {
546604
if (this.minute <= this._defaults.minuteMin) {
547605
this.minute = this._defaults.minuteMin;
548606
this._defaults.secondMin = minDateTime.getSeconds();
607+
this._defaults.millisecMin = minDateTime.getMilliseconds();
549608
} else {
550609
if(this.second < this._defaults.secondMin) this.second = this._defaults.secondMin;
551610
this._defaults.secondMin = this.secondMinOriginal;
552-
}
611+
if(this.millisecond < this._defaults.millisecMin) this.millisecond = this._defaults.millisecMin;
612+
this._defaults.millisecMin = this.millisecondMinOriginal;
613+
}
553614
} else {
554615
this._defaults.minuteMin = this.minuteMinOriginal;
555616
this._defaults.secondMin = this.secondMinOriginal;
617+
this._defaults.millisecMin = this.millisecondMinOriginal;
556618
}
557619
}else{
558620
this._defaults.hourMin = this.hourMinOriginal;
559621
this._defaults.minuteMin = this.minuteMinOriginal;
560622
this._defaults.secondMin = this.secondMinOriginal;
623+
this._defaults.millisecMin = this.millisecondMinOriginal;
561624
}
562625
}
563626

564627
if(this._defaults.maxDateTime !== null && dp_date){
565628
var maxDateTime = this._defaults.maxDateTime,
566629
maxDateTimeDate = new Date(maxDateTime.getFullYear(), maxDateTime.getMonth(), maxDateTime.getDate(), 0, 0, 0, 0);
567630

568-
if(this.hourMaxOriginal === null || this.minuteMaxOriginal === null || this.secondMaxOriginal === null){
631+
if(this.hourMaxOriginal === null || this.minuteMaxOriginal === null || this.secondMaxOriginal === null || this.millisecondMaxOriginal === null){
569632
this.hourMaxOriginal = o.hourMax;
570633
this.minuteMaxOriginal = o.minuteMax;
571634
this.secondMaxOriginal = o.secondMax;
635+
this.millisecondMaxOriginal = o.millisecondMax;
572636
}
573637

574638
if(dp_inst.settings.timeOnly || maxDateTimeDate.getTime() == dp_date.getTime()){
@@ -579,18 +643,23 @@ $.extend(Timepicker.prototype, {
579643
if (this.minute >= this._defaults.minuteMax) {
580644
this.minute = this._defaults.minuteMax;
581645
this._defaults.secondMin = maxDateTime.getSeconds();
646+
this._defaults.millisecMin = minDateTime.getMilliseconds();
582647
} else {
583648
if(this.second > this._defaults.secondMax) this.second = this._defaults.secondMax;
584649
this._defaults.secondMax = this.secondMaxOriginal;
650+
if(this.millisecond > this._defaults.millisecMax) this.millisecond = this._defaults.millisecMax;
651+
this._defaults.millisecMax = this.millisecondMaxOriginal;
585652
}
586653
} else {
587654
this._defaults.minuteMax = this.minuteMaxOriginal;
588655
this._defaults.secondMax = this.secondMaxOriginal;
656+
this._defaults.millisecMax = this.millisecondMaxOriginal;
589657
}
590658
}else{
591659
this._defaults.hourMax = this.hourMaxOriginal;
592660
this._defaults.minuteMax = this.minuteMaxOriginal;
593661
this._defaults.secondMax = this.secondMaxOriginal;
662+
this._defaults.millisecMax = this.millisecondMaxOriginal;
594663
}
595664
}
596665

@@ -599,7 +668,6 @@ $.extend(Timepicker.prototype, {
599668
this.minute_slider.slider("option", { min: this._defaults.minuteMin, max: this._defaults.minuteMax }).slider('value', this.minute);
600669
this.second_slider.slider("option", { min: this._defaults.secondMin, max: this._defaults.secondMax }).slider('value', this.second);
601670
}
602-
603671
},
604672

605673

@@ -611,29 +679,32 @@ $.extend(Timepicker.prototype, {
611679
var hour = (this.hour_slider) ? this.hour_slider.slider('value') : false,
612680
minute = (this.minute_slider) ? this.minute_slider.slider('value') : false,
613681
second = (this.second_slider) ? this.second_slider.slider('value') : false,
682+
millisecond = (this.millisecond_slider) ? this.millisecond_slider.slider('value') : false,
614683
timezone = (this.timezone_select) ? this.timezone_select.val() : false;
615684

616685
if (hour !== false) hour = parseInt(hour,10);
617686
if (minute !== false) minute = parseInt(minute,10);
618687
if (second !== false) second = parseInt(second,10);
688+
if (millisecond !== false) millisecond = parseInt(millisecond,10);
619689

620690
var ampm = (hour < 12) ? 'AM' : 'PM';
621691

622692
// If the update was done in the input field, the input field should not be updated.
623693
// If the update was done using the sliders, update the input field.
624-
var hasChanged = (hour != this.hour || minute != this.minute || second != this.second || (this.ampm.length > 0 && this.ampm != ampm) || timezone != this.timezone);
694+
var hasChanged = (hour != this.hour || minute != this.minute || second != this.second || millisecond != this.millisecond || (this.ampm.length > 0 && this.ampm != ampm) || timezone != this.timezone);
625695

626696
if (hasChanged) {
627697

628698
if (hour !== false)this.hour = hour;
629699
if (minute !== false) this.minute = minute;
630700
if (second !== false) this.second = second;
701+
if (millisecond !== false) this.millisecond = millisecond;
631702
if (timezone !== false) this.timezone = timezone;
632703
this._limitMinMaxDateTime(this.inst, true);
633704
}
634705
if (this._defaults.ampm) this.ampm = ampm;
635706

636-
this._formatTime();
707+
this._formatTime();
637708
if (this.$timeObj) this.$timeObj.text(this.formattedTime);
638709
this.timeDefined = true;
639710
if (hasChanged) this._updateDateTime();
@@ -656,7 +727,7 @@ $.extend(Timepicker.prototype, {
656727
//########################################################################
657728
_formatTime: function(time, format, ampm) {
658729
if (ampm == undefined) ampm = this._defaults.ampm;
659-
time = time || { hour: this.hour, minute: this.minute, second: this.second, ampm: this.ampm, timezone: this.timezone };
730+
time = time || { hour: this.hour, minute: this.minute, second: this.second, millisecond: this.millisecond, ampm: this.ampm, timezone: this.timezone };
660731
var tmptime = format || this._defaults.timeFormat.toString();
661732

662733
if (ampm) {
@@ -668,7 +739,8 @@ $.extend(Timepicker.prototype, {
668739
.replace(/mm/g, ((time.minute < 10) ? '0' : '') + time.minute)
669740
.replace(/m/g, time.minute)
670741
.replace(/ss/g, ((time.second < 10) ? '0' : '') + time.second)
671-
.replace(/s/g, time.second)
742+
.replace(/s/g, time.second)
743+
.replace(/l/g, ((time.millisecond < 10) ? '00' : (time.millisecond < 100) ? '0': '') + time.millisecond)
672744
.replace(/TT/g, time.ampm.toUpperCase())
673745
.replace(/Tt/g, time.ampm.toUpperCase())
674746
.replace(/tT/g, time.ampm.toLowerCase())
@@ -684,6 +756,7 @@ $.extend(Timepicker.prototype, {
684756
.replace(/m/g, time.minute)
685757
.replace(/ss/g, ((time.second < 10) ? '0' : '') + time.second)
686758
.replace(/s/g, time.second)
759+
.replace(/l/g, ((time.millisecond < 10) ? '00' : (time.millisecond < 100) ? '0': '') + time.millisecond)
687760
.replace(/z/g, time.timezone);
688761
tmptime = $.trim(tmptime.replace(/t/gi, ''));
689762
}
@@ -809,7 +882,7 @@ $.datepicker._updateDatepicker = function(inst) {
809882
};
810883

811884
//#######################################################################################
812-
// third bad hack :/ override datepicker so it allows spaces and colan in the input field
885+
// third bad hack :/ override datepicker so it allows spaces and colon in the input field
813886
//#######################################################################################
814887
$.datepicker._base_doKeyPress = $.datepicker._doKeyPress;
815888
$.datepicker._doKeyPress = function(event) {
@@ -904,12 +977,14 @@ $.datepicker._setTime = function(inst, date) {
904977
hour = date ? date.getHours() : defaults.hour,
905978
minute = date ? date.getMinutes() : defaults.minute,
906979
second = date ? date.getSeconds() : defaults.second;
980+
millisecond = date ? date.getMilliseconds() : defaults.millisecond;
907981

908982
//check if within min/max times..
909-
if ((hour < defaults.hourMin || hour > defaults.hourMax) || (minute < defaults.minuteMin || minute > defaults.minuteMax) || (second < defaults.secondMin || second > defaults.secondMax)) {
983+
if ((hour < defaults.hourMin || hour > defaults.hourMax) || (minute < defaults.minuteMin || minute > defaults.minuteMax) || (second < defaults.secondMin || second > defaults.secondMax) || (millisecond < defaults.millisecMin || millisecond > defaults.millisecMax)) {
910984
hour = defaults.hourMin;
911985
minute = defaults.minuteMin;
912986
second = defaults.secondMin;
987+
millisecond = defaults.millisecond;
913988
}
914989

915990
if (tp_inst.hour_slider) tp_inst.hour_slider.slider('value', hour);
@@ -918,6 +993,8 @@ $.datepicker._setTime = function(inst, date) {
918993
else tp_inst.minute = minute;
919994
if (tp_inst.second_slider) tp_inst.second_slider.slider('value', second);
920995
else tp_inst.second = second;
996+
if (tp_inst.millisecond_slider) tp_inst.millisecond_slider.slider('value', millisecond);
997+
else tp_inst.millisecond = millisecond;
921998

922999
tp_inst._onTimeChange();
9231000
tp_inst._updateDateTime(inst);
@@ -938,7 +1015,7 @@ $.datepicker._setTimeDatepicker = function(target, date, withDate) {
9381015
if (typeof date == "string") {
9391016
tp_inst._parseTime(date, withDate);
9401017
tp_date = new Date();
941-
tp_date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second);
1018+
tp_date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second, tp_inst.millisecond);
9421019
}
9431020
else tp_date = new Date(date.getTime());
9441021
if (tp_date.toString() == 'Invalid Date') tp_date = undefined;
@@ -972,7 +1049,7 @@ $.datepicker._getDateDatepicker = function(target, noDefault) {
9721049
if (tp_inst) {
9731050
this._setDateFromField(inst, noDefault);
9741051
var date = this._getDate(inst);
975-
if (date && tp_inst._parseTime($(target).val(), tp_inst.timeOnly)) date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second);
1052+
if (date && tp_inst._parseTime($(target).val(), tp_inst.timeOnly)) date.setHours(tp_inst.hour, tp_inst.minute, tp_inst.second,tp_inst.millisecond);
9761053
return date;
9771054
}
9781055
return this._base_getDateDatepicker(target, noDefault);

0 commit comments

Comments
 (0)