PDA

View Full Version : Extention to Ext.Date for UTC conversion



murrah
18 Jan 2009, 1:12 PM
Hi,

My app takes records from people in different timezones and stores them on the server in UTC (GMT). That is because when a user views an existing record they need to see it in their local time zone even if that record was created by someone in a different timezone. Standard stuff.

The following extention provides conversion utilities for this:



Ext.override(Date, {
toUTC : function() {
// Convert the date to the UTC date
return this.add(Date.MINUTE, this.getTimezoneOffset());
},

fromUTC : function() {
// Convert the date from the UTC date
return this.add(Date.MINUTE, -this.getTimezoneOffset());
}
});


and this standalone function is useful also:

function UTCStringToDate(dtStr, format){
var dt = Date.parseDate(dtStr, format);
if (dt == undefined) return ''; // or whatever you want to do
return dt.fromUTC();
}

Place the example (below) in a folder within your ext\examples folder to test.

This depends, of course, on the user having the correct time zone set on their computer and having the correct operating system updates containing their relevant daylight saving tables. The internal browser date objects are in UTC and the browser converts them to the local time based on the operating system settings when you call one of the JS date object methods.

You could either convert the dates to UTC before submitting to the server
eg: http://extjs.com/forum/showthread.php?t=56160 or one of the other solutions in the forum.

Or, if you know the user's time zone in your server app, convert the dates there.

To convert a UTC date coming into your store add something like this to your field config in your record:

{name: 'dueDate', type:'date', dateFormat: "Y-m-d H:i:s", defaultValue: '', convert: function(v){return UTCStringToDate(v, "Y-m-d H:i:s");} },


Cheers,
Murray


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';

Ext.override(Date, {
toUTC : function() {
// Convert the date to the UTC date
return this.add(Date.MINUTE, this.getTimezoneOffset());
},

fromUTC : function() {
// Convert the date from the UTC date
return this.add(Date.MINUTE, -this.getTimezoneOffset());
}
});

function UTCStringToDate(dtStr, format){
var dt = Date.parseDate(dtStr, format);
if (dt == undefined) return '';
return dt.fromUTC();
}

Ext.onReady(function() {
Ext.QuickTips.init();




var dtFormat = "Y-m-d H:i";
var txt = '';

var myDate = new Date(2009,5,20,12,0,0);

txt += 'A NON DST (Daylight Saving Time) date in my time zone:<br /><b>' + myDate.format(dtFormat) + '</b>';
txt += '<br /><br />The time zone offset for this date on this computer is:<br /><b>' + myDate.getTimezoneOffset() + '</b> minutes.';
txt += '<br /><br />This date converted to UTC:<br /><b>' + myDate.toUTC().format(dtFormat) +'</b>';

myDate = new Date(2009,1,20,12,0,0);
txt += '<br /><br />=================<br />A DST date in my time zone:<br /><b>' + myDate.format(dtFormat) + '</b>';
txt += '<br /><br />The time zone offset for this date on this computer is:<br /><b>' + myDate.getTimezoneOffset() + '</b> minutes.';

var utcDate = myDate.toUTC();
txt += '<br /><br />This date converted to UTC:<br /><b>' + utcDate.format(dtFormat) + '<br /></b>';

txt += '<br /><br />=================<br />Convert this UTC date back to local date time<br /><b>' + utcDate.fromUTC().format(dtFormat) + '</b>';

var utcString = "2009-02-20 01:00:00";
txt += '<br /><br />=================<br />Convert a string UTC date ("' + utcString + '") to local date object<br /><b>' + UTCStringToDate(utcString, "Y-m-d H:i:s").format(dtFormat) + '</b>';


Ext.MessageBox.show({
title:'Results',
msg : txt,
buttons: Ext.MessageBox.OK
});

});

</script>
<title>UTC Dates Example</title>
</head>
<body>
</body>
</html>