Clock in different time zones

Question

I am trying to create two clocks on a website that says two times on it. One from London and the other from New York.

I have been able to create a clock that reads the current time on my computer but i'm not sure how to place a time zone into this.

The code I have so far is:

<script type="text/javascript" language="javascript">

function renderTime() {
    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();

    if (h == 0) {
        h = 12
    } else if (h > 12) {
        h = h - 12;
        diem = "PM";
    }

    if (h < 10) {
        h = "0" + h;
    }

    if (m < 10) {
        m = "0" + m;
    }

    if (s < 10) {
        s = "0" + s;
    }

    var myClock = document.getElementById ("clockDisplay");
    myClock.textContent = h + ":" + m + ":" + s + " " + diem;

    setTimeout ('renderTime()', 1000);
}
renderTime();
</script>

This is being applied to a CSS style I have created so I can have the clock in a specific typeface.

Answer 1

You can add or subtract hours from your date with

currentTime.setHours(currentTime.getHours()+offset);

where offset is any number of hours.

I updated the jsfiddle with that line and the function so that it accepts a parameter for the offset. This is not the UTC offset, just how many hours to add from the system time. You can get the current UTC offset by currentTime.getTimezoneOffset()/60

Demo

Answer 2

currentTime.getTimezoneOffset() will give you the time difference between Greenwich Mean Time (GMT) and local time, in minutes.

You can use the value to calculate time in required timezone.

Answer 3

To do this properly, you will need a time zone database, such as one of the ones I listed here.

All of the other answers to this question are making the mistake in thinking that a "time zone" and a "time zone offset" are the same thing. They are not. For example, the time zone for London is Europe/London, which can have either a +0 or +1 offset depending on what time of year it is. The time zone for New York is America/New_York, which can have either a -5 or -4 offset based on a completely different set of dates than London.

You might want to look at moment-timezone:

moment().tz("America/New_York").format()

Answer 4

Check out http://www.datejs.com/ it handles dates and timezones nicely

if you check out the demo, in the text box, put 1 GMT vs 1 MST or 1 EST and it will pop out a nice date for you wrt/ that time zone

Answer 5

Thank you everyone for your help. It was all getting a bit confusing but I found a good example here which is how I ended up working it out. Check out example 4: http://www.ajaxupdates.com/jclock-jquery-clock-plugin/

Hope it's useful for someone else!

Answer 6

I use on m php website the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"
<script type="text/javascript">
$(function() {
    getStatus();
});

function getStatus() {
<?php
echo "    var z = '".strftime("%Z",strtotime("now"))."';\n";
?>
    var d = new Date();
    var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    var offset = -8;
    if(z == "PDT") offset = -7;
    var currentTime = new Date(utc + (3600000*offset));
    var currentHours = currentTime.getHours ( );
    var currentMinutes = currentTime.getMinutes ( );
    currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
    var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
    currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
    currentHours = ( currentHours == 0 ) ? 12 : currentHours;
    var currentTimeString = currentHours + ":" + currentMinutes + ": " + timeOfDay + " " + z;

    $('td#clock').html(currentTimeString);
    setTimeout("getStatus()",5000);
}
</script>

Where i use a table, so this will fill

<table><tr><td id='clock'></td></tr></table>

with the time from Los Angeles (PDT or PST) however my server also runs on that time so passing the strftime from your server might not produce the same effect. But as stated this was my resolve to get a working time in a other zone.