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.

[Here's](http://stackoverflow.com/questions/10087819/convert-date-to-another-timezone-in-javascript) a bunch of ways this can be accomplished. — jeffjenx, Jun 04 '12 at 15:03

score 3 · Answer 1 · edited May 23 '17 at 12:08

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()

score 2 · Answer 2 · answered Jun 04 '12 at 15:03

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.

answered Jun 04 '12 at 15:03

manuskc

784
4
14

score 1 · Answer 3 · answered Jun 04 '12 at 15:05

1

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

answered Jun 04 '12 at 15:05

raddrick

4,274
2
27
33

score 1 · Accepted Answer · answered Jun 04 '12 at 15:08

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

answered Jun 04 '12 at 15:08

sachleen

30,730
8
78
73

Hi Sachleen, I appreciate your help. I've been trying to figure this out via your method. So using: currentTime.setHours(currentTime.getHours()+offset); and replacing the '+offset' with '-5' (time difference from London) gives me the time for New York. However, if someone in New York looks at the time would it be reduced by a further 5 hours? Also to have the UK time would I just need to put in: currentTime.getTimezoneOffset()/60? or are there further steps I would need to take. I'd appreciate your help, i'm quite new to this! Thank you. – Houmy Jun 05 '12 at 14:35
Yes, if you did -5 it would subtract 5 hours from the local time. That's why you `getTimezoneOffset` first to figure out how many hours to add/subtract. You don't want to do -5, but -5 from UTC (+0), so you'll need to offset the offset from the local offset. For example, If my time offset is already -5, your script would wouldn't subtract anything. If it was -6, it would add 1 so the final result will be -5. Doing things with time can get messy, I'd look at a library that already has all of the weird things worked out. – sachleen Jun 05 '12 at 15:27

score 0 · Answer 5 · answered Jun 06 '12 at 11:08

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!

score 0 · Answer 6 · answered Sep 21 '16 at 12:56

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.

Clock in different time zones

6 Answers6

Linked

Related