Setting timezone for running clock in JavaScript

Question

Good days guys. I have this nice and clean code for a running clock.

<script type="text/javascript">

function DisplayTime(){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var CurrentDate=new Date()
var hours=CurrentDate.getHours()
var minutes=CurrentDate.getMinutes()
var seconds=CurrentDate.getSeconds()
var DayNight="PM"
if (hours<12) DayNight="AM";
if (hours>12) hours=hours-12;
if (hours==0) hours=12;
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds+" "+DayNight;
timeElement.innerHTML="<font style='font-family:Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-extfont-size:14px;color:#fff;'>"+currentTime+"</b>"
setTimeout("DisplayTime()",1000)
}
window.onload=DisplayTime

</script>

My only problem is it's based the system time. How can I set the timezone so that it will display the correct time based on the timezone specified?

Answer 1

There's nothing built into the JavaScript Date object that handles any timezones other than local (system) time and UTC.

You can do it by giving your Date instance the wrong time, using the delta between one of those timezones (local or UTC) and the time zone you want to use. It's easier if you use UTC.

So for instance, say we want our time in GMT+01:00:

var dt = new Date();
dt.setTime(dt.getTime() + (60 * 60 * 1000));
//                         ^^^^^^^^^^^^^^---- one hour in milliseconds,
//                                            which is our offset from UTC/GMT
var hours = dt.getUTCHours();       // Use UTC methods to get time
var minutes = dt.getUTCMinutes();
var seconds = dt.getUTCSeconds();

Time stuff, particularly with timezones, is hard. You might look at using a library for it, although for just this sort of clock that would be overkill. One good library is MomentJS (which has a timezone add-on).

Answer 2

You can use getTimezoneOffset method of the Date object. It gives you the timezone offset, according to your timezone in minutes.

So in order to get the current time in UTC (+0 timezone) you can do something of the sort:

var tzOffset = CurrentDate.getTimezoneOffset();

// some timezones are not set hours, so we must calculate the minutes
var minutesOffset = parseInt(tzOffset%60,10);

// the offset hours for the timezone
var hoursOffset = parseInt(tzOffset/60, 10);

Then you need to do some math in your code to account for the offset:

var hours   = CurrentDate.getHours() + hoursOffset;
var minutes = CurrentDate.getMinutes() + minutesOffset;

This would account for your timezone. If you want to calculate another timezone, that you specify, change the tzOffset above to show your timezone.

var tzOffset = CurrentDate.getTimezoneOffset() + TIMEZONE_HOURS*60;

TIMEZONE_HOURS is the timezone in hours you want, e.g. if you want UTC+3, you must set TIMEZONE_HOURS to 3.

As a whole timezones are a bit complicated task because they change a lot and there are some caveats with them. If you want to dwell more into this, check this answer in another question on SO

Answer 3

visit this link as a reference

example:

var x = new Date();
var currentTimeZoneOffsetInHours = x.getTimezoneOffset() / 60;

Answer 4

I have implemented your working code by adding one more function to obtain what you want. See this will help

function DisplayTime(timeZoneOffsetminutes){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var requiredDate=getTimeZoneTimeObj(timeZoneOffsetminutes)
var hours=requiredDate.h;
var minutes=requiredDate.m;
var seconds=requiredDate.s;
var DayNight="PM";
if (hours<12) DayNight="AM";
if (hours>12) hours=hours-12;
if (hours==0) hours=12;
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds+" "+DayNight;
timeElement.innerHTML="<font style='font-family:Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-extfont-size:14px;color:#fff;'>"+currentTime+"</b>"
setTimeout("DisplayTime(-330)",1000)
}
window.onload=DisplayTime(-330);
function getTimeZoneTimeObj(timeZoneOffsetminutes){
   var localdate = new Date()
   var timeZoneDate = new Date(localdate.getTime() + ((localdate.getTimezoneOffset()- timeZoneOffsetminutes)*60*1000));
  return {'h':timeZoneDate.getHours(),'m':timeZoneDate.getMinutes(),'s':timeZoneDate.getSeconds()};
}

#curTime{
background-color:#000;
}

<div id="curTime"></div>

Answer 5

You can try using moment.js

It is very nice library which handles timezones too.