CODEWITHSUNDEEP
javascriptdatetimetimezoneutc
user1149244
user1149244

Reputation: 755

Javascript display date and time in my website using UTC to consider users timezone in javascript

I want to have a timer in my website like a digital clock. It will have a date and a time in it. I have this following code to do it:

var clockID = 0;

function UpdateClock() {
   if(clockID) {
      clearTimeout(clockID);
      clockID  = 0;
   }

    var tDate = new Date();
    var in_hours = tDate.getHours()
    var in_minutes=tDate.getMinutes();
    var in_seconds= tDate.getSeconds();

    if(in_minutes < 10)
        in_minutes = '0'+in_minutes;
    if(in_seconds<10)   
        in_seconds = '0'+in_seconds;
    if(in_hours<10) 
        in_hours = '0'+in_hours;

   document.getElementById('theTime').innerHTML = "" 
                   + in_hours + ":" 
                   + in_minutes + ":" 
                   + in_seconds;

   clockID = setTimeout("UpdateClock()", 1000);
}
function StartClock() {
   clockID = setTimeout("UpdateClock()", 500);
}

function KillClock() {
   if(clockID) {
      clearTimeout(clockID);
      clockID  = 0;
   }
}

But this code is displaying the current computer time so the time doesn't fit with my timezone. What else do i need to add in my code so that it will display date and time according to my timezone? If the date is on DST, it will show the exact time in DST too.

Upvotes: 0

Views: 2796

Answers (2)

mplungjan
mplungjan

Reputation: 177950

If you need to use JS only, have a look at

add or subtract timezone difference to javascript Date

For example DEMO

var clockID;
var yourTimeZoneFrom = -7.00; //time zone value where you are at

var d = new Date();  
//get the timezone offset from local time in minutes
var tzDifference = yourTimeZoneFrom * 60 + d.getTimezoneOffset();
//convert the offset to milliseconds
var offset = tzDifference * 60 * 1000;

function UpdateClock() {
    var tDate = new Date(new Date().getTime()+offset);
    var in_hours = tDate.getHours()
    var in_minutes=tDate.getMinutes();
    var in_seconds= tDate.getSeconds();

    if(in_minutes < 10)
        in_minutes = '0'+in_minutes;
    if(in_seconds<10)   
        in_seconds = '0'+in_seconds;
    if(in_hours<10) 
        in_hours = '0'+in_hours;

   document.getElementById('theTime').innerHTML = "" 
                   + in_hours + ":" 
                   + in_minutes + ":" 
                   + in_seconds;

}
function StartClock() {
   clockID = setInterval(UpdateClock, 500);
}

function KillClock() {
  clearTimeout(clockID);
}
window.onload=function() {
  StartClock();
}

Upvotes: 1

Munish Poonia
Munish Poonia

Reputation: 838

In JS you can get the current timezone offset. You need to make adjustment the offset to desired timeZone.

<div id="theTime"></div>
<script>
  var clockID = 0;
  var requiredTimeZone = 360; // CST (+6:00 hrs)

  function UpdateClock() {
     if(clockID) {
        clearTimeout(clockID);
        clockID  = 0;
     }

      var tDate = new Date();
      var calculatedTime = tDate.getTime() + (tDate.getTimezoneOffset() * 60000) - (requiredTimeZone * 60000);
      tDate.setTime(calculatedTime);
      var in_hours = tDate.getHours()
      var in_minutes=tDate.getMinutes();
      var in_seconds= tDate.getSeconds();

      if(in_minutes < 10)
          in_minutes = '0'+in_minutes;
      if(in_seconds<10)   
          in_seconds = '0'+in_seconds;
      if(in_hours<10) 
          in_hours = '0'+in_hours;

     document.getElementById('theTime').innerHTML = "" 
                     + in_hours + ":" 
                     + in_minutes + ":" 
                     + in_seconds;

     clockID = setTimeout("UpdateClock()", 1000);
  }
  function StartClock() {
     clockID = setTimeout("UpdateClock()", 500);
  }

  function KillClock() {
     if(clockID) {
        clearTimeout(clockID);
        clockID  = 0;
     }
  }
  StartClock();
</script>

The current browser timezone offset is added to the browser time and then the desired timezone offset is subtracted to get the required time.

Your required timezone needs to be communicated to the browser in some manner for this to work.

Upvotes: 1

Related Questions