Is there a JQuery plugin to convert UTC datetimes to local user timezone?

Question

If I have a tag:

2010-01-01 11:30 PM

I would like a jquery script or plug in to convert every <

Answer 1

When I used this, I had to change the line

var hours = givenDate.getHours();

to

var hours = givenDate.getUTCHours();

When debugging through this, the line var givenDate = new Date(tagText) ends up creating a Date object that is in UTC (if you give it a date in RFC1123 format, e.g. ffffd, dd MMM yyyy HH:mm:ss GMT), but when you call getHours on that you get the hours in the local time zone. So unless you call getUTCHours, it doesn't work.

So the full thing is

/*
    Note: this requires that the JQuery-DateFormat plugin be loaded first
    http://plugins.jquery.com/project/jquery-dateFormat
*/

(function ($) {
    $.fn.localTimeFromUTC = function (format) {

        return this.each(function () {

            // get time offset from browser
            var currentDate = new Date();
            var offset = -(currentDate.getTimezoneOffset() / 60);

            // get provided date
            var tagText = $(this).html();
            var givenDate = new Date(tagText);

            // apply offset
            var hours = givenDate.getUTCHours();
            hours += offset;
            givenDate.setHours(hours);

            // format the date
            var localDateString = $.format.date(givenDate, format);
            $(this).html(localDateString);
        });
    };
})(jQuery);

See this other question for how I used it in combination with the timeago plugin.

Answer 2

Use input date to find time zone offset. Important for DST changes.

(function ($) {
$.fn.localTimeFromUTC = function (format) {
    return this.each(function () {

        // get provided date 
        var tagText = $(this).html();
        var givenDate = new Date(tagText);

        if(givenDate == 'NaN') return;

        // get time offset from browser 
        var offset = -(givenDate.getTimezoneOffset() / 60);

        // apply offset 
        var hours = givenDate.getHours();
        hours += offset;
        givenDate.setHours(hours);

        // format the date 
        var localDateString = $.format.date(givenDate, format);
        $(this).html(localDateString);


    });
};
})(jQuery); 

Use it like....

function ConvertDatesToLocalTime() {
        $('.ConvertUtcToLocal').localTimeFromUTC('MM/dd/yyyy hh:mm:ss a');
    }

    $(document).ready(function () {
        ConvertDatesToLocalTime();

    });

Assign 'ConvertUtcToLocal' class to all elements requiring conversion.

Answer 3

$(".localdatetime").each(function () {
        var datestr = $(this).text();
        //alert(datestr);
        if (datestr.trim() != '') {
            var dateOb = (new Date(Date.parse(datestr, 'MM-dd-yyyy HH:mm'))).setTimezone("GMT").toString('dd MMM yyyy hh:mm tt');
            //alert(dateOb);
            $(this).text(dateOb);
        }
    })

this can also be used along with Date.js library to display time in user timezone

Answer 4

CodeGrue thanks so much for sharing this with the community.

For those who are forced to work with other timezones than UTC .. you can alter the function by adding the time difference like this:

Original snippet:

 var offset = -(currentDate.getTimezoneOffset() / 60);

Snippet altered to work with CEST timezone (Time zone offset: UTC + 2 hours):

 var offset = -(currentDate.getTimezoneOffset() / 60 + 2);

and so on.

Answer 5

Ok, so I created one that does it:

/*
    Note: this requires that the JQuery-DateFormat plugin (available here) be loaded first
    http://plugins.jquery.com/project/jquery-dateFormat
*/

(function ($) {
    $.fn.localTimeFromUTC = function (format) {

        return this.each(function () {

            // get time offset from browser
            var currentDate = new Date();
            var offset = -(currentDate.getTimezoneOffset() / 60);

            // get provided date
            var tagText = $(this).html();
            var givenDate = new Date(tagText);

            // apply offset
            var hours = givenDate.getHours();
            hours += offset;
            givenDate.setHours(hours);

            // format the date
            var localDateString = $.format.date(givenDate, format);
            $(this).html(localDateString);
        });
    };
})(jQuery);

Usage:

    <span class="utcdate">2/5/2010 10:30 PM</span>

    $('.utcdate').localTimeFromUTC('MM/dd/yyyy hh:mm a');