Changing list of time zone offset numbers to current times with JavaScript

Question

I am displaying a list of names and their time zone offset numbers in a table. The offset numbers are their time zone's offset from UTC. I need to change all of the offset numbers to show the current time in the person's time zone using JavaScript or jQuery.

What I would like to happen is the offset numbers would be replaced with the current date/time from the calcTime function... any idea what I'm doing wrong?

Here's my code:

John Doe
-5
Jane Doe
3
Jim Smith
7
Cathy Jones
-3

user_9078341 · Answer

I think this is what you are attempting to achieve (with significant changes).

Note the use of setInterval() rather than set time out and the structural changes to the HTML.

const utc = document.querySelector('.utc');
const collection = document.querySelectorAll('.timezone');
const outputs = document.querySelectorAll('.output');
const localeTZoffSet = new Date().getTimezoneOffset()/60 * 3600000;

setInterval(() => {
  utc.textContent = calcTime(0);
  collection.forEach((element, idx) => {
    outputs[idx].textContent = calcTime(element.textContent);
  });
});

function calcTime(offset) {
  return "The local time is " + new Date(Date.now() + localeTZoffSet + (3600000 * offset)).toLocaleTimeString();
}

UTC: 
John Doe - 
-5
Jane Doe - 
3
Jim Smith - 
7
Cathy Jones - 
-3

user_6373073 · Answer

With @RandyCasburn 's help, I was able to get this to work:

$(document).ready(function() {
     const collection = document.querySelectorAll('.timezone');
     const outputs = document.querySelectorAll('.output');

     function calcTime(offset) {
         d = new Date();
         utc = d.getTime() + (d.getTimezoneOffset() * 60000);
         nd = new Date(utc + (3600000*offset));
         return nd.toLocaleString();
     }
     setInterval(() => {
        collection.forEach((element, idx) => {
           outputs[idx].textContent = calcTime(element.textContent);
           $(".timezone").hide();
        });
    });
});

John Doe - 
-5
Jane Doe - 
3
Jim Smith - 
7
Cathy Jones - 
-3

Thank you so much!

user_2159528 · Answer

If I get the problem correctly.. .oO(lol)
You wish to display the realtime of each users based on their UTC offset.

I would have the user timezone in a data attribute to make sure to keep it handy.
(See changes made in your HTML below)
Then:

Create a local time object (where the page renders)
From the local time, you can get the UTC offset and the local hour.
Calculate the offset between the page viewer and the "other user".
Meaning... As a page viewer I am in GMT-5 timezone, the first user (in your HTML) has a zero offset with me. Correct?
So starting from the local time and local GMT offset, add the "real time difference".
Sadly, the .setHours() method return milliseconds... So create a new date object with it.
Have it to a string and remove the part after "GMT-..." since this part is not accurate now.

Here is a demo with all the console.logs:

console.clear();

$(document).ready(function () {
  function calcTime(offset) {
    // That is a date object with the user's timezone
    let refDate = new Date();

    // So what is the user's timezone?
    let userTimezone = refDate.getTimezoneOffset() / 60;
    console.log("userTimezone", userTimezone);

    // What is the user's Hour?
    let localHour = refDate.getHours();
    console.log("localHour", localHour);

    // Make the calculation here
    let timeZoneDiff = offset + userTimezone;
    console.log("timeZoneDiff", timeZoneDiff);

    // Set the hour... But we still are in a "timezoned object"
    // and the .setHours returns milliseconds. ;(
    let hourRearanged = refDate.setHours(localHour + timeZoneDiff);
    console.log("hourRearanged", hourRearanged);

    // So re-generate a date object from that "arranged hour"
    let semiResult = new Date(hourRearanged).toString();
    console.log("semiResult were the part after GMT is wrong:", semiResult);

    console.log("---------------------------------------");
    
    // Rturn the part before "GMT"
    return semiResult.split("GMT")[0];
  }

  setInterval(() => {
    $(".name").each(function (index, element) {
      h = parseInt($(element).data("timezone"));
      $(element).next(".userTime").html(calcTime(h));
    });
  }, 1000);
});


John Doe (GMT-5)
-5
Jane Doe (GMT+3)
3
Jim Smith (GMT+7)
7
Cathy Jones (GMT-3)
-3

Run in full page mode please...

Changing list of time zone offset numbers to current times with JavaScript

3 Answers