Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

If I have a tag:

<span class="utctime">2010-01-01 11:30 PM</span>

I would like a jquery script or plug in to convert every utctime class to the current user's browser local time. I would prefer to find this before writing one.

like image 557
CodeGrue Avatar asked Sep 30 '10 12:09

CodeGrue


People also ask

How to convert UTC time into local date time using JavaScript?

Given an UTC date and the task is to convert UTC date time into local date-time using JavaScript toLocaleString() function. Syntax: var theDate = new Date(Date.parse('06/14/2020 4:41:48 PM UTC')) theDate.toLocaleString() JavaScript code:

How to convert local time to UTC time in Python?

//Covert datetime by GMT offset //If toUTC is true then return UTC time other wise return local time function convertLocalDateToUTCDate (date, toUTC) { date = new Date (date); //Local time converted to UTC console. log ("Time:" + date); var localOffset = date. getTimezoneOffset () * 60000; var localTime = date.

When to use local time and when to use UTC?

For consistency, you should mostly use local time when you have to render a date and time to the user, but you should store the actual values in UTC. For example, if you store a local time of midnight (00:00) in your database, you wouldn't know if that's midnight in Tokyo (Japan), in Paris (France), in New York (US), etc.

How to add time difference between UTC and CEST timezone?

For those who are forced to work with other timezones than UTC .. you can alter the function by adding the time difference like this: Snippet altered to work with CEST timezone (Time zone offset: UTC + 2 hours): and so on. Show activity on this post.


3 Answers

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');
like image 155
CodeGrue Avatar answered Oct 17 '22 12:10

CodeGrue


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.

like image 7
GP2 Avatar answered Oct 17 '22 13:10

GP2


$(".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

like image 1
gargmanoj Avatar answered Oct 17 '22 12:10

gargmanoj