0

I have a countdown timer that I'd like to show the exact same amount of remaining hours and minutes for every user regardless of timezone or location (days aren't important).

I'm assuming I need to target and output UTC somehow. Will I have any daylight-saving problems with this? The actual end time is not very important. Everyone seeing the same remaining time is.

I've researched similar posts here but they're a few years old and didn't find answers. Hoping a solution or newer approach is available. All programming languages considered.

// Set the date we're counting down to
var countDownDate = new Date("May 10, 2022 24:00:00").getTime();

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

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // 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);

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

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
#demo {
  font: normal 20px arial
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>

https://jsfiddle.net/r64zp93c/

Lowis
  • 123
  • 1
  • 10
  • 2
    "May 10, 2022 24:00:00" is not a format supported by ECMA-262 so parsing is implementation dependent. See [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) If parsed correctly, it will likely be treated as local so represent a different instant in time for each user with a different offset. Consider instead `new Date(Date.UTC(2022,4,11))` which will create a *Date* with the same time value regardless of the host offset. – RobG May 09 '22 at 12:13
  • Note that the `Date` object has not changed much in many years, so the age of questions and answers is irrelevant. – Heretic Monkey May 09 '22 at 12:16
  • Does this answer your question? [javascript making a jquery countdown work with UTC times](https://stackoverflow.com/questions/28788031/javascript-making-a-jquery-countdown-work-with-utc-times) – Heretic Monkey May 09 '22 at 12:18
  • Be careful using javascript only if time sync is required, js runs client-side so you'd rely on the user having his computer time being set correctly. Another approach could be to get the start time passed in by your server and use javascript to countdown from there. – Bob Vandevliet May 09 '22 at 12:22
  • Should I use one of these over the other? `var countDownDate = new Date(Date.UTC(2022,4,11))` `var countDownDate = Date.UTC(2022, 4, 11)` – Lowis May 09 '22 at 13:00
  • You will need a server side solution, this will never work in only browser. – Grumpy May 09 '22 at 14:24
  • @Grumpy can you explain in more detail please? – Lowis May 09 '22 at 14:43
  • @Lowis You can only achieve this by reading the time form a server and show the time from the server. Local browsers will never have all the same time, they can be minutes or hours of. – Grumpy May 09 '22 at 16:29

1 Answers1

1

It seems Date.UTC() is what you're looking for. From the docs:

The Date.UTC() method accepts parameters similar to the Date constructor, but treats them as UTC. It returns the number of milliseconds since January 1, 1970, 00:00:00 UTC.

So instead of

var countDownDate = new Date("May 10, 2022 24:00:00").getTime();

You should be able to do

var countDownDate = Date.UTC(2022, 4, 10, 24, 0, 0);

(But maybe adjust the hours/day to UTC to match the specific time you need)

Jan Bijster
  • 56
  • 4
  • Do you suggest also making any changes to the line: `var now = new Date().getTime();` – Lowis May 09 '22 at 13:05
  • No, leave that as it is because you want to compare the global countdown datetime with the local time of the user. For instance, at the time of writing it's 13:22 UTC. So if I type `new Date().getTime() - Date.UTC(2022, 4, 9, 13, 22, 0)` I get a number < 60,000 (less than a minute in milliseconds.) – Jan Bijster May 09 '22 at 13:22
  • Only I see that the month index is 0-based, so `4` for May (updated in the answer) – Jan Bijster May 09 '22 at 13:24
  • This will only work for one user, not all users. – Grumpy May 09 '22 at 14:25