Watches in different time zones

Question

I am trying to create two hours on a website that speaks twice. One from London and the other from New York.

I managed to create a clock that reads the current time on my computer, but I'm not sure how to put the time zone in it.

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 applies to the CSS style that I created, so I can have a clock in a specific font.

Answer 1

You can add or subtract hours from your date using

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

where the offset is any number of hours.

I updated jsfiddle with this line and function to accept the parameter for the offset. This is not a UTC offset, how many hours to add from the system time. You can get the current UTC offset at 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 the time in the desired time zone.

Answer 3

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

All other answers to this question are mistaken for the idea that the “time zone” and “time zone offset” are one and the same. They are not. For example, the time zone for London is Europe/London , which can have either an offset of +0 or +1, depending on the time of year. The time zone for New York is America/New_York , which can have either -5 or -4 offsets, based on a completely different set of dates than in London.

You might want to see the moment-time :

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

Answer 4

Check out http://www.datejs.com/ does an excellent job with dates and time zones

if you check the demo version, put 1 GMT vs 1 MST or 1 EST in the text box and you will see a good date for you time zone / this time zone

Answer 5

Thank you all for your help. It was all a bit confusing, but I found a good example, this is how I ended up working on it. Example 4: http://www.ajaxupdates.com/jclock-jquery-clock-plugin/

Hope this is helpful to someone else!

Answer 6

I use the following on the m php website:

 <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 the table, so this will fill

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

over time from Los Angeles (PDT or PST), however, my server also works at this time, so sending strftime from your server may not have the same effect. But, as I said, it was my determination to get working time in another zone.