Skip to content

Adding ability to choose the timezone #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
3 commits merged into from
Mar 2, 2011
Merged

Adding ability to choose the timezone #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9c5de29
Added timezone selection.
harbulot Feb 28, 2011
da54680
Added example HTML page.
harbulot Feb 28, 2011
33ca84c
Fix for default timezone if missing.
harbulot Feb 28, 2011
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions example-timezone.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">/**/</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js">/**/</script>
<script src="jquery-ui-timepicker-addon.js">/**/</script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css" />
<style media="screen" type="text/css">
body{ font: Arial, Helvetica, sans-serif; }
#ui-datepicker-div{ font-size: 90%; }

/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.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 td { font-size: 90%; }

input { width: 200px; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".timepicktest0").datetimepicker({ dateFormat: $.datepicker.RFC_2822, timeFormat: 'hh:mm' });
$(".timepicktest1").datetimepicker({ dateFormat: $.datepicker.RFC_2822, timeFormat: 'hh:mm z', showTimezone: true, timezone: "+0100" });
$(".timepicktest2").datetimepicker({ dateFormat: $.datepicker.RFC_2822, timeFormat: 'hh:mm z', showTimezone: true,
timezoneList: [{"value": "+0000", "label": "British Winter Time"}, {"value": "+0100", "label": "British Summer Time"}] });
});
</script>
</head>
<body>

<form action="" method="">
<input type="text" class="timepicktest0" /><br />
<input type="text" class="timepicktest1" /><br />
<input type="text" class="timepicktest1" value="Mon, 28 Feb 2011 10:58"/><br />
<input type="text" class="timepicktest1" value="Mon, 28 Feb 2011 10:58 +0000"/><br />
<input type="text" class="timepicktest2" value="Mon, 28 Feb 2011 10:58 +0000"/><br />
<input type="text" class="timepicktest2" value="Mon, 28 Feb 2011 10:58 +0100"/><br />
</form>
</body>
</html>
61 changes: 50 additions & 11 deletions jquery-ui-timepicker-addon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,24 @@ function Timepicker() {
timeText: 'Time',
hourText: 'Hour',
minuteText: 'Minute',
secondText: 'Second'
secondText: 'Second',
timezoneText: 'Time Zone'
};
this._defaults = { // Global defaults for all the datetime picker instances
showButtonPanel: true,
timeOnly: false,
showHour: true,
showMinute: true,
showSecond: false,
showTimezone: false,
showTime: true,
stepHour: 0.05,
stepMinute: 0.05,
stepSecond: 0.05,
hour: 0,
minute: 0,
second: 0,
timezone: '+0000',
hourMin: 0,
minuteMin: 0,
secondMin: 0,
Expand All @@ -66,7 +69,11 @@ function Timepicker() {
alwaysSetTime: true,
separator: ' ',
altFieldTimeOnly: true,
showTimepicker: true
showTimepicker: true,
timezoneList: ["-1100", "-1000", "-0900", "-0800", "-0700", "-0600",
"-0500", "-0400", "-0300", "-0200", "-0100", "+0000",
"+0100", "+0200", "+0300", "+0400", "+0500", "+0600",
"+0700", "+0800", "+0900", "+1000", "+1100", "+1200"]
};
$.extend(this._defaults, this.regional['']);
}
Expand All @@ -79,9 +86,11 @@ $.extend(Timepicker.prototype, {
hour_slider: null,
minute_slider: null,
second_slider: null,
timezone_select: null,
hour: 0,
minute: 0,
second: 0,
timezone: '+0000',
hourMinOriginal: null,
minuteMinOriginal: null,
secondMinOriginal: null,
Expand All @@ -92,6 +101,10 @@ $.extend(Timepicker.prototype, {
formattedDate: '',
formattedTime: '',
formattedDateTime: '',
timezoneList: ["-1100", "-1000", "-0900", "-0800", "-0700", "-0600",
"-0500", "-0400", "-0300", "-0200", "-0100", "+0000",
"+0100", "+0200", "+0300", "+0400", "+0500", "+0600",
"+0700", "+0800", "+0900", "+1000", "+1100", "+1200"],

/* Override the default settings for all instances of the time picker.
@param settings object - the new settings to use as defaults (anonymous object)
Expand All @@ -112,6 +125,7 @@ $.extend(Timepicker.prototype, {
tp_inst.minute = tp_inst._defaults.minute;
tp_inst.second = tp_inst._defaults.second;
tp_inst.ampm = '';
tp_inst.timezone = tp_inst._defaults.timezone;
tp_inst.$input = $input;


Expand Down Expand Up @@ -185,6 +199,7 @@ $.extend(Timepicker.prototype, {
.replace(/m{1,2}/ig, '(\\d?\\d)')
.replace(/s{1,2}/ig, '(\\d?\\d)')
.replace(/t{1,2}/ig, '(am|pm|a|p)?')
.replace(/z{1}/ig, '((\\+|-)\\d\\d\\d\\d)?')
.replace(/\s/g, '\\s?') + '$',
order = this._getFormatPositions(),
treg;
Expand All @@ -197,7 +212,7 @@ $.extend(Timepicker.prototype, {
var dp_dateFormat = $.datepicker._get(this.inst, 'dateFormat');
regstr = '.{' + dp_dateFormat.length + ',}' + this._defaults.separator + regstr;
}

treg = timeString.match(new RegExp(regstr, 'i'));

if (treg) {
Expand All @@ -216,6 +231,7 @@ $.extend(Timepicker.prototype, {

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

return true;

Expand All @@ -227,8 +243,8 @@ $.extend(Timepicker.prototype, {
// figure out position of time elements.. cause js cant do named captures
//########################################################################
_getFormatPositions: function() {
var finds = this._defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|t{1,2})/g),
orders = { h: -1, m: -1, s: -1, t: -1 };
var finds = this._defaults.timeFormat.toLowerCase().match(/(h{1,2}|m{1,2}|s{1,2}|t{1,2}|z)/g),
orders = { h: -1, m: -1, s: -1, t: -1, z: -1 };

if (finds)
for (var i = 0; i < finds.length; i++)
Expand Down Expand Up @@ -328,6 +344,11 @@ $.extend(Timepicker.prototype, {
'</dd>';
} else html += '<dd class="ui_tpicker_second" id="ui_tpicker_second_' + dp_id + '"' +
((o.showSecond) ? '' : noDisplay) + '></dd>';

html += '<dt class="ui_tpicker_timezone_label" id="ui_tpicker_timezone_label_' + dp_id + '"' +
((o.showTimezone) ? '' : noDisplay) + '>' + o.timezoneText + '</dt>';
html += '<dd class="ui_tpicker_timezone" id="ui_tpicker_timezone_' + dp_id + '"' +
((o.showTimezone) ? '' : noDisplay) + '></dd>';

html += '</dl></div>';
$tp = $(html);
Expand Down Expand Up @@ -379,6 +400,20 @@ $.extend(Timepicker.prototype, {
tp_inst._onTimeChange();
}
});


this.timezone_select = $tp.find('#ui_tpicker_timezone_'+ dp_id).append('<select></select>').find("select");
$.fn.append.apply(this.timezone_select,
$.map(o.timezoneList, function(val, idx) {
return $("<option />")
.val(typeof val == "object" ? val.value : val)
.text(typeof val == "object" ? val.label : val);
})
);
this.timezone_select.val((typeof this.timezone != "undefined" && this.timezone != null && this.timezone != "") ? this.timezone : o.timezone);
this.timezone_select.change(function() {
tp_inst._onTimeChange();
});

// Add grid functionality
if (o.showHour && o.hourGrid > 0) {
Expand Down Expand Up @@ -548,8 +583,9 @@ $.extend(Timepicker.prototype, {
_onTimeChange: function() {
var hour = (this.hour_slider) ? this.hour_slider.slider('value') : false,
minute = (this.minute_slider) ? this.minute_slider.slider('value') : false,
second = (this.second_slider) ? this.second_slider.slider('value') : false;

second = (this.second_slider) ? this.second_slider.slider('value') : false,
timezone = (this.timezone_select) ? this.timezone_select.val() : false

if (hour !== false) hour = parseInt(hour,10);
if (minute !== false) minute = parseInt(minute,10);
if (second !== false) second = parseInt(second,10);
Expand All @@ -558,13 +594,14 @@ $.extend(Timepicker.prototype, {

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

if (hasChanged) {

if (hour !== false)this.hour = hour;
if (minute !== false) this.minute = minute;
if (second !== false) this.second = second;
if (timezone !== false) this.timezone = timezone;
}
if (this._defaults.ampm) this.ampm = ampm;

Expand All @@ -579,7 +616,7 @@ $.extend(Timepicker.prototype, {
//########################################################################
_formatTime: function(time, format, ampm) {
if (ampm == undefined) ampm = this._defaults.ampm;
time = time || { hour: this.hour, minute: this.minute, second: this.second, ampm: this.ampm };
time = time || { hour: this.hour, minute: this.minute, second: this.second, ampm: this.ampm, timezone: this.timezone };
var tmptime = format || this._defaults.timeFormat.toString();

if (ampm) {
Expand All @@ -595,15 +632,17 @@ $.extend(Timepicker.prototype, {
.replace(/TT/g, time.ampm.toUpperCase())
.replace(/tt/g, time.ampm.toLowerCase())
.replace(/T/g, time.ampm.charAt(0).toUpperCase())
.replace(/t/g, time.ampm.charAt(0).toLowerCase());
.replace(/t/g, time.ampm.charAt(0).toLowerCase())
.replace(/z/g, time.timezone);
} else {
tmptime = tmptime.toString()
.replace(/hh/g, ((time.hour < 10) ? '0' : '') + time.hour)
.replace(/h/g, time.hour)
.replace(/mm/g, ((time.minute < 10) ? '0' : '') + time.minute)
.replace(/m/g, time.minute)
.replace(/ss/g, ((time.second < 10) ? '0' : '') + time.second)
.replace(/s/g, time.second);
.replace(/s/g, time.second)
.replace(/z/g, time.timezone);
tmptime = $.trim(tmptime.replace(/t/gi, ''));
}

Expand Down