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?

The date object gets the time from the user's device. This is solely based on client side. The server side time gets a standard time zone (UTC) I guess, otherwise client side depends on user's time zone. — Hamza Dhamiya
– Hamza Dhamiya, Commented Aug 29, 2015 at 9:36
Side note: That code is awful and horribly outdated. It fails to use basic JavaScript conventions, relies on the horror that is Automatic Semicolon Insertion (but only sometimes), has a workaround for browsers that don't have getElementById (there aren't any anymore, and haven't been for 15 years or so), uses the long-deprecated-and-now-actually-invalid font element, creates an unnecessary global, ... — T.J. Crowder
– T.J. Crowder, Commented Aug 29, 2015 at 9:39

T.J. Crowder · Accepted Answer · 2015-08-29 09:41:00Z

3

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

edited Aug 29, 2015 at 9:41

answered Aug 29, 2015 at 9:37

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user786 Over a year ago

what about moment.js? what it does?

T.J. Crowder Over a year ago

@Alex: Oddly, I just added a note about MomentJS to the answer. Overkill for just this simple clock, but if one were doing anything more sigificant...

Community · Accepted Answer · 2017-05-23 12:22:03Z

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

Ankit Agarwal · Accepted Answer · 2015-08-29 09:53:40Z

0

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>

answered Aug 29, 2015 at 9:53

Ankit Agarwal

1,35810 silver badges15 bronze badges

2 Comments

Benedict Payot Over a year ago

Wow, thank you! Exactly what I needed! What do I need to change to set the timezone to GMT +8?

Ankit Agarwal Over a year ago

for GMT+8 change the function parameter to -(8*60) i.e. -480

Super Hornet · Accepted Answer · 2015-08-29 09:35:24Z

0

visit this link as a reference

example:

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

answered Aug 29, 2015 at 9:35

Super Hornet

2,9275 gold badges31 silver badges58 bronze badges

Comments

adnan kamili · Accepted Answer · 2015-08-29 10:23:08Z

0

You can try using moment.js

It is very nice library which handles timezones too.

answered Aug 29, 2015 at 10:23

adnan kamili

9,5559 gold badges76 silver badges136 bronze badges

Collectives™ on Stack Overflow

Setting timezone for running clock in JavaScript

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related