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 more cleaner way to approach this.
All I had to do was to add 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.

Leave a Comment