1

I was following this tutorial: https://www.w3schools.com/howto/howto_js_countdown.asp

And everything works except for timezones, I want it to show the same time on every device, no matter the timezone, in UTC. How would I go about this?

If someone in a timezone was ahead of me, they would see a different time (because they are an hour ahead, so the countdown would end at a different time. It would end for them an hour ahead of when it ends for me, I want the same time on the timer to be shown everywhere

Code (Edited):

function convertDateToUTC(date) {
  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
}

function getUTCNow() {
  var now = new Date();
  var time = now.getTime();
  var offset = now.getTimezoneOffset();
  offset = offset * 60000;
  return time - offset;
}
// Set the date we're counting down to
//var countDownDate = new Date("Sep 15, 2018 15:00:00").getTime();
var countDownDate = new Date("Sep 7, 2018 20:00:00");
var countDD = convertDateToUTC(countDownDate);

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date();
  var nowUTC = now.getUTCTime();

  // Find the distance between now and the count down date
  var distance = countDD.getTime() - nowUTC.getTime();

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="timer"
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "RELEASED!";
  }
}, 1000);
<div id="timer"></div>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Funk Master
  • 11
  • 2
  • 1
    Note that different browsers may parse that string in different ways; take a look at the answers to [Converting a string to a date in JavaScript](https://stackoverflow.com/q/5619202/215552) for information. – Heretic Monkey Sep 06 '18 at 22:46
  • 1
    This question is a bit confusing; you're displaying a difference between two moments in time, how does it matter if it's UTC or not? Regardless, the answer is in [How do you convert a JavaScript date to UTC?](https://stackoverflow.com/q/948532/215552). – Heretic Monkey Sep 06 '18 at 22:49
  • 2
    Possible duplicate of [How do you convert a JavaScript date to UTC?](https://stackoverflow.com/questions/948532/how-do-you-convert-a-javascript-date-to-utc) – Heretic Monkey Sep 06 '18 at 22:51
  • If someone in a timezone was ahead of me, they would see a different time (because they are an hour ahead, so the countdown would end at a different time. It would end for them an hour ahead of when it ends for me, I want the same time on the timer to be shown everywhere – Funk Master Sep 06 '18 at 22:52
  • The time displays perfectly fine, it's just different for everyone who sees it. – Funk Master Sep 06 '18 at 22:54
  • The answer isn't in there. If I compare "now" it will be in the timezone the person looking at the page is in. While the main date would be in UTC, it still doesn't fix the problem. – Funk Master Sep 07 '18 at 01:39
  • You misunderstand; the code you've presented here gets the difference between now (in the user's current time zone) and compares it against another time (also in the user's current time zone). Thus, they will see the same number of days/hours/minutes/seconds as anyone else. There is only one valid case for there being a difference: if the changeover from daylight saving to standard (or vice versa) occurs between the two values. In that case, convert both dates to UTC (as the answers in the linked questions show) and then get the difference. – Heretic Monkey Sep 07 '18 at 13:23
  • But I don't want the code to be in that person's timezone, I want it to display the same countdown time if you logged in anywhere in the world. – Funk Master Sep 07 '18 at 19:22
  • adding .toISOString(); just makes the timer not show up. – Funk Master Sep 07 '18 at 19:34
  • Check my edit. I need "now" to get CURRENT UTC time, and I need "CountDownDate" in UTC. It is NOT displaying the timestamp on the website, which is the issue. – Funk Master Sep 07 '18 at 20:15
  • Right, so, you've got a function in your new code that gets "now" in UTC. So where you have `var now = new Date();` just put `var now = getUTCNow();` Remove `var nowUTC = now.getUTCTime();` and change `nowUTC.getTime()` to `now` (since `getUTCNow()` returns the numeric value). – Heretic Monkey Sep 07 '18 at 21:14

0 Answers0