Converting UTC date time from server to local date time on the browser client using JavaScript


There is this web application that I've been working on.
I wanted to be able to handle globalization while displaying datetime on the web page.
This datetime was stored on the server in UTC form.
I wanted it to be displayed on the client side i.e. the browser in the local time.
This was an ASP.Net MVC application and I initially added the following code snippet in the Razor view to display the datetime(@Model.PostedOn contained the UTC datetime) ...
<div class="posted-date">
@Model.PostedOn
</div>
The next step was to convert this to the local time on the browser client.
This could be done using the getTimezoneOffset()
method that javascript provides as follows...
$(document).ready(function () {
// Determine timezone offset in milliseconds
// from: http://www.w3schools.com/jsref/jsref_getTimezoneOffset.asp
var date = new Date()
var offsetms = date.getTimezoneOffset() * 60 * 1000;
$('.posted-date').each(function () {
try {
var text = $(this).html();
var serverDate = new Date(text);
serverDate = new Date(serverDate.valueOf() - offsetms);
$(this).html(serverDate.toDateString() + " " + serverDate.toLocaleTimeString());
}
catch (ex) {
console.warn("Error converting time", ex);
}
});
});
While this could be one way to achieve it, I found that the third-party library moment.js provided a much cleaner way to approach this.
All I had to do was to add a reference to the moment.min.js library and the above code could now be refactored as...
$(document).ready(function () {
$('.posted-date').each(function () {
try {
var text = $(this).html();
var serverDate = moment.utc(text).local().format('LLL');
$(this).html(serverDate);
}
catch (ex) {
console.warn("Error converting date time", ex);
}
});
});
It helps achieve this in a single line of code and additionally also provides various parameters to handle the locale formats.
moment().format('L'); // 08/25/2015
moment().format('l'); // 8/25/2015
moment().format('LL'); // August 25, 2015
moment().format('ll'); // Aug 25, 2015
moment().format('LLL'); // August 25, 2015 1:02 AM
moment().format('lll'); // Aug 25, 2015 1:02 AM
moment().format('LLLL'); // Tuesday, August 25, 2015 1:02 AM
moment().format('llll'); // Tue, Aug 25, 2015 1:02 AM
Let me know which approach you find convenient and the libraries you usually use for this purpose.
Subscribe to my newsletter
Read articles from Sundeep Kamath directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Sundeep Kamath
Sundeep Kamath
My name is Sundeep Kamath. I’m a programmer based in Hyderabad, India. I work at Microsoft, but this blog, its content and opinions are my own. I blog about technology, code and the web.