Developing Web Application with Time Zones Support

Introduction

When you develop web applications, you should know that client PCs can be located anywhere on earth. Even if you develop an app just for your country, users you should remember it (in Russia now we have 9 time zones, before 28^th of March, we had 11 time zones). On big sites with many members, you can do it very easily – you can place field “time zone” in member profile, in Sharepoint I saw this solution, and many enterprise apps do it like this. But if we have a simple website with blog publications or website with news and we don’t have member profiles on server, how we can support user’s time zones?

Solution

I thought about this question because I wanted to develop time zone support on my own site. My case is ASP.NET MVC app and Microsoft SQL Server DB. First, I started from learning which params we have at HTTP headers, but it doesn’t have information about it. So we can’t use regional settings and methods DateTime.ToLocalTime and DateTime.ToUniversalTime until we get user time zone on server. If we used our app before without time zones support, we need to change dates from local time zone to UTC time zone (something like Greenwich Mean Time). You can do it easily with this SQL update statement:

update dbo.MyTable set [Date] = dateadd(hour, -4, [Date])

I have -4 in this statement because time zone of server is GMT+4 (summer time). Next in code where you get current time, you need to change functions: in tsql scripts, getdate() to getutcdate(), and on server change DateTime.Now (or Today) on DateTime.Now.ToUniversalTime(). So on server (app and DB), we will always have dates in UTC time zone.

Next step – how to show datetime on client in browser. We need to show the correct time for user (in his time zone). You can get user time zone with JavaScript function getTimezoneOffset(), it returns the difference in minutes from UTC to user time zone. On server, I render all dates in format “dd.MM.yyyy HH:mm”. All dates I placed in HTML element with CSS class utcdate, if date is located in text, I just surround it with span element. So all dates I have like this:

<h3 class="utcdate"><%= Model.BlogPost.Date.ToString("dd.MM.yyyy HH:mm")%></h3>

And definition of CSS class utcdate:

.utcdate {display: none; }

When user gets page, all dates are invisible. I did it because on some pages in Internet Explorer, we can see how old dates change with other dates (in other browsers, JavaScript changes it very quickly).

I wrote this JavaScript code for this:

function utcToLocal(u) {
    var l = new Date(u.substring(6, 10), u.substring(3, 5)-1, 
	u.substring(0, 2), u.substring(11, 13), u.substring(14, 16));
    var d = new Date(l.getTime() + (-l.getTimezoneOffset() * 60 * 1000));
    return wZ(d.getDate()) + '.' + wZ(d.getMonth()+1) + '.' + 
	d.getFullYear() + ' ' + wZ(d.getHours()) + ':' + wZ(d.getMinutes());
}
function wZ(x) { if (x <;= 9) return '0' + x; return x; }
function doCurrentDate() {
    $(".utcdate").each(function () {
        if ($(this).css("display") != "inline") {
            this.innerHTML = utcToLocal(this.innerHTML);
            $(this).css("display", "inline");
        }
    });
}
$(document).ready(function () {
    doCurrentDate();
});

I confess that I’m not a professional in JavaScript, so maybe you will tell me how to do it better. I use jQuery, writing this functions without jQuery will be more difficult, because jQuery helps with selectors. Last 3 lines of this script on document ready state invoke doCurrentDate() function, which finds all elements with CSS class utcdate and does for each: if display property of style doesn’t have ‘inline’ value, then with function utcToLocal we change date from utc to user time zone and set ‘inline’ value for property display.

Function utcToLocal is very simple. It parses input string on each date time parts, creates new date object, and then creates new date object from previous with adding required amount of time (getTime() returns milliseconds, so we multiply value of getTimezoneOffset on 60 seconds in minute and 1000 milliseconds in second), and then it returns the formatted value of date. I added function wZ, which adds 0 before value if needed, because I wanted to show 01.01.2010 instead of 1.1.2010 on my site.

Because in method doCurrentDate we have to check that date is changed on user’s time zone (check that display hasn't ‘inline’ value), we can invoke this function as many times as we need. So when on my site user added comment (I use AJAX for add comments and include HTML of it with JavaScript at page), I can invoke doCurrentDate again.

Of course it is no good, that I don’t use user’s date format for showing date, because in US date format is MM/dd/yyyy and in Russia is dd.MM.yyyy. You can use JavaScript function toLocalString() which return formatted string with date. But it places seconds and days of week, and I don’t want to see it on my site, I think that it is trash. :)

I think it will be great if HTML 5 format will have HTML date supports. For example, you can write this on page:

<date>03.04.2010T00:38:00+04:00</date>

And the browser will change it in user’s local time. And date element can use some attribute for specifying which date format you want to see on your site.

History

• 28^th September, 2010: Initial post