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.