Javascript transform date on timezone

Question

So I am trying to take a time that is application wide and display it in the user's timezone. Here is what I have worked up and it is working. However I am sure there is a better way to do this. The starting timezone will always be Central. Central = 5. I am only concerned with the US timezones but if there is an easy way to implement it worldwide I am down with that too. The text label I am working with will display like 4:00PM that is why there is so much substringing.

function timeZones() {
    var timezone = new Date().getTimezoneOffset();
    timezone = timezone / 60;
    //STARTING TIMEZONE WILL ALWAYS BE CENTRAL
    var difference = 5 - timezone;
    $(".time-zone").each(function () {
        var a = $(this).text();
        var hour = a.substring(0, a.indexOf(":") - 1);
        hour = parseInt(a);
        var yourTime;
        //East Coast
        if (difference == 1) {
            hour = hour + difference;
            if (hour == 12) {
                yourTime = hour + a.substring(a.indexOf(":"), a.indexOf("A") - 1) + "PM";
            }
            else if (hour > 12) {
                hour = hour - 12;
                yourTime = hour + a.substring(a.indexOf(":"), a.indexOf("A") - 1) + "PM";
            }
            else {
                yourTime = hour + a.substring(a.indexOf(":"));
            }
            $(this).text(yourTime);
        }
        //Mountain
        if (difference == -1) {
            hour = hour + difference;
            if (hour == 0) {
                hour = 12;
                yourTime = hour + a.substring(a.indexOf(":"));
            }
            else if (hour < 0) {
                hour = 12 + hour;
                yourTime = hour + a.substring(a.indexOf(":"), a.indexOf("P") - 1) + "AM";
            }
            else {
                yourTime = hour + a.substring(a.indexOf(":"));
            }
            $(this).text(yourTime);
        }
        //West Coast
        if (difference == -2) {
            hour = hour + difference;
            if (hour == 0) {
                hour = 12;
                yourTime = hour + a.substring(a.indexOf(":"));
            }
            else if (hour < 0) {
                hour = 12 + hour;
                yourTime = hour + a.substring(a.indexOf(":"), a.indexOf("P") - 1) + "AM";
            }
            else {
                yourTime = hour + a.substring(a.indexOf(":"));
            }
            $(this).text(yourTime);
        }
        //Alaska
        if (difference == -3) {
            hour = hour + difference;
            if (hour == 0) {
                hour = 12;
                yourTime = hour + a.substring(a.indexOf(":"));
            }
            else if (hour < 0) {
                hour = 12 + hour;
                yourTime = hour + a.substring(a.indexOf(":"), a.indexOf("P") - 1) + "AM";
            }
            else {
                yourTime = hour + a.substring(a.indexOf(":"));
            }
            $(this).text(yourTime);
        }
    });
}

I think you should take a look at moment timezone library instead of trying to implement this. It'll save you a lot of headaches. — Tuan, Oct 02 '14 at 17:13

score 1 · Accepted Answer · edited May 23 '17 at 12:21

You said:

The starting timezone will always be Central. Central = 5.

That is incorrect. A time zone and a time zone offset are not the same thing. The US Central Time zone uses a UTC-6 offset in the winter, and uses a UTC-5 offset in the summer when daylight saving time is in effect. You cannot hard-code either of these. See also, "Time Zone != Offset" in the timezone tag wiki.

If you need to work with non-local time zones in JavaScript, you'll need a library, such as those I list here. For example, here is how you can achieve this using moment-timezone - which is an add on for the moment.js library.

moment.tz('2014-10-02 01:23:00','America/Chicago').local().format('YYYY-MM-DD h:mm a')

In the above example, a local date/time in Chicago (US Central Time) is parsed. Then it is converted to whatever time zone the user's browser is running in (with the local function). Then it is formatted as a string according to the format specified.

3 years later into my programming career I have learned to always use Momentjs and stop trying to re-design the wheel. To be honest the problem with this old code was that the company I was working for at the time didn't store their dates as UTC. — J. Pedro, Oct 25 '17 at 17:23

Paul S. · Answer 2 · 2014-10-02T18:26:42.360

Something I threw together

// timezone_out optional = local timezone
function timeConversionGenerator(timezone_in, timezone_out) {
    if (undefined === timezone_out)
        timezone_out = new Date().getTimezoneOffset();
    var d = timezone_in - timezone_out;
    return function (time) {
        var hh = time.hh,
            mm = time.mm + d,
            ss = time.ss;
        while (mm <   0) mm += 60, hh -= 1;
        while (mm >= 60) mm -= 60, hh += 1;
        while (hh <   0) hh += 24;
        hh %= 24;
        return {
            hh: hh,
            mm: mm,
            ss: ss
        };
    }
}

var c = timeConversionGenerator(5 * 60); // 5 hours behind UTC to local time

Now

c({
    hh: 13,
    mm: 18,
    ss: 0
});
/* converted to my local time (British Summer Time)
{
   hh: 19,
   mm: 18,
   ss: 0
}
*/

Then

function toAMPMString(time) {
    return ((time.hh % 12) || 12)
        + ':'
        + (time.mm < 10 ? '0' : '') + time.mm
        + ' ' + (time.hh < 12 ? 'AM' : 'PM');
}

// so
toAMPMString(c({ hh: 13, mm: 18, ss: 0})); // "7:18 PM"

Javascript transform date on timezone

2 Answers2