How to display localized date and time data for web users using ASP.NET

Question

I have an ASP.NET application and a UTC timestamp on the server. I want to display the timestamp to the user in the right time zone and use the local date and time format .

eg. Jan 2, 2012 14:00:00 UTC should display as 1/2/2012 9:00 AM for a user in New York, USA (UTC -0500) and 02/01/2012 14:00 for a user in London, United Kingdom .

This seemingly simple task turned out to be surprisingly difficult. MSDN has an article with the same title, but it talks about parsing user input, and not about displaying server data, so it doesn't fully apply.

Timezone offset is easily determined by the client using JavaScript

offset = new Date().getTimezoneOffset(); ,

but JavaScript provides very poor date and time formatting support. All you get is the toLocaleString() method, which results in an ugly long string like Monday, January 02, 2012 9:00:00 AM . There are no restrictions on shorter formats, so we linger on the client with good time zone information and poor date / time format capabilities.

The situation is exactly the opposite of the server. We can use the Accept-Language HTTP header to get a custom locale ( not the best choice, but it can be good enough ), and then click on the .NET database of known locales, so our code goes line by line

CultureInfo userCulture = new CultureInfo(Request.UserLanguages[0]); plus some error handling.

But then we get stuck in the time zone task. Yes, you can get it via JavaScript and then pass it as a cookie or as postback data, but what if we need to display the dates on the very first page of the application? It can be argued that the first page is always the login page, but this is not the case when the user's user information is saved between sessions (the "remember me" option). The solution to this may be to preserve the time zone offset as part of the user profile, but then it can easily become obsolete (getting and turning off daylight saving time between sessions).

Is there a comprehensive solution to this problem that works well and does not require a ton of code to be written? I'm very curious, please let me know.

Answer 1

You must pass the time string to the client in standard form, for example, ISO8601:

 var timeString = '2012-01-02T16:00:00Z'; 

Some browsers will correctly parse ISO8601 lines, and some will not, so analyze it manually to be sure. It's quite simple - create a local date object, then set the UTC date and time:

 function localDateFromUTC(s) { var x = s.split(/[-\s:tz]/i); var d = new Date(); d.setUTCFullYear(x[0], x[1], x[2]); d.setUTCHours(x[3], x[4], x[5]); return d; } var s = '2012-01-02T16:00:00Z'; var d = localDateFromUTC(s); alert(d); // Shows local date and time for the provided UTC date and time 

If you need a specific output, you need to format it manually, for example.

 function formatDate(d) { var days = ['Sunday','Monday','Tuesday','Wednesday', 'Thursday','Friday','Saturday']; var months = ['January','February','March','April','May','June','July', 'August','September','October','November','December']; return days[d.getDay()] + ', ' + d.getDate() + ' ' + months[d.getMonth()] + ', ' + d.getFullYear(); } 

You can try using toLocaleString (), but the results in different browsers vary greatly, most of them tend to ignore local settings.