Skip to content

Commit b23b607

Browse files
trentrichardsontrentrichardson
committed
Merge timezone additions
2 parents c8f81ed + 33ca84c commit b23b607

File tree

2 files changed

+91
-11
lines changed

2 files changed

+91
-11
lines changed

‎example-timezone.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html>
4+
<head>
5+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">/**/</script>
6+
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js">/**/</script>
7+
<script src="jquery-ui-timepicker-addon.js">/**/</script>
8+
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css" />
9+
<style media="screen" type="text/css">
10+
body{ font: Arial, Helvetica, sans-serif; }
11+
#ui-datepicker-div{ font-size: 90%; }
12+
13+
/* css for timepicker */
14+
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
15+
.ui-timepicker-div dl{ text-align: left; }
16+
.ui-timepicker-div dl dt{ height: 25px; }
17+
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
18+
.ui-timepicker-div td { font-size: 90%; }
19+
20+
input { width: 200px; }
21+
</style>
22+
<script type="text/javascript">
23+
$(document).ready(function(){
24+
$(".timepicktest0").datetimepicker({ dateFormat: $.datepicker.RFC_2822, timeFormat: 'hh:mm' });
25+
$(".timepicktest1").datetimepicker({ dateFormat: $.datepicker.RFC_2822, timeFormat: 'hh:mm z', showTimezone: true, timezone: "+0100" });
26+
$(".timepicktest2").datetimepicker({ dateFormat: $.datepicker.RFC_2822, timeFormat: 'hh:mm z', showTimezone: true,
27+
timezoneList: [{"value": "+0000", "label": "British Winter Time"}, {"value": "+0100", "label": "British Summer Time"}] });
28+
});
29+
</script>
30+
</head>
31+
<body>
32+
33+
<form action="" method="">
34+
<input type="text" class="timepicktest0" /><br />
35+
<input type="text" class="timepicktest1" /><br />
36+
<input type="text" class="timepicktest1" value="Mon, 28 Feb 2011 10:58"/><br />
37+
<input type="text" class="timepicktest1" value="Mon, 28 Feb 2011 10:58 +0000"/><br />
38+
<input type="text" class="timepicktest2" value="Mon, 28 Feb 2011 10:58 +0000"/><br />
39+
<input type="text" class="timepicktest2" value="Mon, 28 Feb 2011 10:58 +0100"/><br />
40+
</form>
41+
</body>
42+
</html>

‎jquery-ui-timepicker-addon.js‎

Lines changed: 49 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -37,21 +37,24 @@ function Timepicker() {
3737
timeText: 'Time',
3838
hourText: 'Hour',
3939
minuteText: 'Minute',
40-
secondText: 'Second'
40+
secondText: 'Second',
41+
timezoneText: 'Time Zone'
4142
};
4243
this._defaults = { // Global defaults for all the datetime picker instances
4344
showButtonPanel: true,
4445
timeOnly: false,
4546
showHour: true,
4647
showMinute: true,
4748
showSecond: false,
49+
showTimezone: false,
4850
showTime: true,
4951
stepHour: 0.05,
5052
stepMinute: 0.05,
5153
stepSecond: 0.05,
5254
hour: 0,
5355
minute: 0,
5456
second: 0,
57+
timezone: '+0000',
5558
hourMin: 0,
5659
minuteMin: 0,
5760
secondMin: 0,
@@ -66,7 +69,11 @@ function Timepicker() {
6669
alwaysSetTime: true,
6770
separator: ' ',
6871
altFieldTimeOnly: true,
69-
showTimepicker: true
72+
showTimepicker: true,
73+
timezoneList: ["-1100", "-1000", "-0900", "-0800", "-0700", "-0600",
74+
"-0500", "-0400", "-0300", "-0200", "-0100", "+0000",
75+
"+0100", "+0200", "+0300", "+0400", "+0500", "+0600",
76+
"+0700", "+0800", "+0900", "+1000", "+1100", "+1200"]
7077
};
7178
$.extend(this._defaults, this.regional['']);
7279
}
@@ -79,9 +86,11 @@ $.extend(Timepicker.prototype, {
7986
hour_slider: null,
8087
minute_slider: null,
8188
second_slider: null,
89+
timezone_select: null,
8290
hour: 0,
8391
minute: 0,
8492
second: 0,
93+
timezone: '+0000',
8594
hourMinOriginal: null,
8695
minuteMinOriginal: null,
8796
secondMinOriginal: null,
@@ -92,6 +101,10 @@ $.extend(Timepicker.prototype, {
92101
formattedDate: '',
93102
formattedTime: '',
94103
formattedDateTime: '',
104+
timezoneList: ["-1100", "-1000", "-0900", "-0800", "-0700", "-0600",
105+
"-0500", "-0400", "-0300", "-0200", "-0100", "+0000",
106+
"+0100", "+0200", "+0300", "+0400", "+0500", "+0600",
107+
"+0700", "+0800", "+0900", "+1000", "+1100", "+1200"],
95108

96109
/* Override the default settings for all instances of the time picker.
97110
@param settings object - the new settings to use as defaults (anonymous object)
@@ -184,6 +197,7 @@ $.extend(Timepicker.prototype, {
184197
.replace(/m{1,2}/ig, '(\\d?\\d)')
185198
.replace(/s{1,2}/ig, '(\\d?\\d)')
186199
.replace(/t{1,2}/ig, '(am|pm|a|p)?')
200+
.replace(/z{1}/ig, '((\\+|-)\\d\\d\\d\\d)?')
187201
.replace(/\s/g, '\\s?') + '$',
188202
order = this._getFormatPositions(),
189203
treg;
@@ -196,7 +210,7 @@ $.extend(Timepicker.prototype, {
196210
var dp_dateFormat = $.datepicker._get(this.inst, 'dateFormat');
197211
regstr = '.{' + dp_dateFormat.length + ',}' + this._defaults.separator + regstr;
198212
}
199-
213+
200214
treg = timeString.match(new RegExp(regstr, 'i'));
201215

202216
if (treg) {
@@ -215,6 +229,7 @@ $.extend(Timepicker.prototype, {
215229

216230
if (order.m !== -1) this.minute = Number(treg[order.m]);
217231
if (order.s !== -1) this.second = Number(treg[order.s]);
232+
if (order.z !== -1) this.timezone = treg[order.z];
218233

219234
return true;
220235

@@ -226,8 +241,8 @@ $.extend(Timepicker.prototype, {
226241
// figure out position of time elements.. cause js cant do named captures
227242
//########################################################################
228243
_getFormatPositions: function() {
229-
var finds = this._defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|t{1,2})/g),
230-
orders = { h: -1, m: -1, s: -1, t: -1 };
244+
var finds = this._defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|t{1,2}|z)/g),
245+
orders = { h: -1, m: -1, s: -1, t: -1, z: -1 };
231246

232247
if (finds)
233248
for (var i = 0; i < finds.length; i++)
@@ -327,6 +342,11 @@ $.extend(Timepicker.prototype, {
327342
'</dd>';
328343
} else html += '<dd class="ui_tpicker_second" id="ui_tpicker_second_' + dp_id + '"' +
329344
((o.showSecond) ? '' : noDisplay) + '></dd>';
345+
346+
html += '<dt class="ui_tpicker_timezone_label" id="ui_tpicker_timezone_label_' + dp_id + '"' +
347+
((o.showTimezone) ? '' : noDisplay) + '>' + o.timezoneText + '</dt>';
348+
html += '<dd class="ui_tpicker_timezone" id="ui_tpicker_timezone_' + dp_id + '"' +
349+
((o.showTimezone) ? '' : noDisplay) + '></dd>';
330350

331351
html += '</dl></div>';
332352
$tp = $(html);
@@ -378,6 +398,20 @@ $.extend(Timepicker.prototype, {
378398
tp_inst._onTimeChange();
379399
}
380400
});
401+
402+
403+
this.timezone_select = $tp.find('#ui_tpicker_timezone_'+ dp_id).append('<select></select>').find("select");
404+
$.fn.append.apply(this.timezone_select,
405+
$.map(o.timezoneList, function(val, idx) {
406+
return $("<option />")
407+
.val(typeof val == "object" ? val.value : val)
408+
.text(typeof val == "object" ? val.label : val);
409+
})
410+
);
411+
this.timezone_select.val((typeof this.timezone != "undefined" && this.timezone != null && this.timezone != "") ? this.timezone : o.timezone);
412+
this.timezone_select.change(function() {
413+
tp_inst._onTimeChange();
414+
});
381415

382416
// Add grid functionality
383417
if (o.showHour && o.hourGrid > 0) {
@@ -546,8 +580,9 @@ $.extend(Timepicker.prototype, {
546580
_onTimeChange: function() {
547581
var hour = (this.hour_slider) ? this.hour_slider.slider('value') : false,
548582
minute = (this.minute_slider) ? this.minute_slider.slider('value') : false,
549-
second = (this.second_slider) ? this.second_slider.slider('value') : false;
550-
583+
second = (this.second_slider) ? this.second_slider.slider('value') : false,
584+
timezone = (this.timezone_select) ? this.timezone_select.val() : false
585+
551586
if (hour !== false) hour = parseInt(hour,10);
552587
if (minute !== false) minute = parseInt(minute,10);
553588
if (second !== false) second = parseInt(second,10);
@@ -556,13 +591,14 @@ $.extend(Timepicker.prototype, {
556591

557592
// If the update was done in the input field, the input field should not be updated.
558593
// If the update was done using the sliders, update the input field.
559-
var hasChanged = (hour != this.hour || minute != this.minute || second != this.second || (this.ampm.length > 0 && this.ampm != ampm));
594+
var hasChanged = (hour != this.hour || minute != this.minute || second != this.second || (this.ampm.length > 0 && this.ampm != ampm) || timezone != this.timezone);
560595

561596
if (hasChanged) {
562597

563598
if (hour !== false)this.hour = hour;
564599
if (minute !== false) this.minute = minute;
565600
if (second !== false) this.second = second;
601+
if (timezone !== false) this.timezone = timezone;
566602
}
567603
if (this._defaults.ampm) this.ampm = ampm;
568604

@@ -589,7 +625,7 @@ $.extend(Timepicker.prototype, {
589625
//########################################################################
590626
_formatTime: function(time, format, ampm) {
591627
if (ampm == undefined) ampm = this._defaults.ampm;
592-
time = time || { hour: this.hour, minute: this.minute, second: this.second, ampm: this.ampm };
628+
time = time || { hour: this.hour, minute: this.minute, second: this.second, ampm: this.ampm, timezone: this.timezone };
593629
var tmptime = format || this._defaults.timeFormat.toString();
594630

595631
if (ampm) {
@@ -605,15 +641,17 @@ $.extend(Timepicker.prototype, {
605641
.replace(/TT/g, time.ampm.toUpperCase())
606642
.replace(/tt/g, time.ampm.toLowerCase())
607643
.replace(/T/g, time.ampm.charAt(0).toUpperCase())
608-
.replace(/t/g, time.ampm.charAt(0).toLowerCase());
644+
.replace(/t/g, time.ampm.charAt(0).toLowerCase())
645+
.replace(/z/g, time.timezone);
609646
} else {
610647
tmptime = tmptime.toString()
611648
.replace(/hh/g, ((time.hour < 10) ? '0' : '') + time.hour)
612649
.replace(/h/g, time.hour)
613650
.replace(/mm/g, ((time.minute < 10) ? '0' : '') + time.minute)
614651
.replace(/m/g, time.minute)
615652
.replace(/ss/g, ((time.second < 10) ? '0' : '') + time.second)
616-
.replace(/s/g, time.second);
653+
.replace(/s/g, time.second)
654+
.replace(/z/g, time.timezone);
617655
tmptime = $.trim(tmptime.replace(/t/gi, ''));
618656
}
619657

0 commit comments

Comments
 (0)