Set the countdown to date and time, with client's timezone

Question

var countDownDate = new Date("March 5, 2019 05:00:00").getTime();

var x = setInterval(function() {

    var now = new Date().getTime();
    var distance = countDownDate - now;
    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);
    document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("countdown").innerHTML = "EXPIRED";
    }
}, 1000);

the Date is when the countdown ends in Moscow timezone, but i want the countdown timer to account the timezone for other users: so if it ends in 5AM MSK, then it's supposed to end in 10PM ET for users in that region, etc.

Answer 1

The crux of the problem comes down to your first line of code:

var countDownDate = new Date("March 5, 2019 05:00:00").getTime();

The string you pass to the Date object is in a non-standard format, and does not contain any time zone offset information, so it will always be interpreted in the user's local time zone.

If you are confident in your knowledge that the user is in UTC+3 on this date at this time, then you can simply change your input string to the ISO 8601 format with time zone offset:

var countDownDate = new Date("2019-03-05T05:00:00+03:00").getTime();

However, this only works here because Moscow currently doesn't observe daylight saving time. It did in the past though, and other Russian time zones have switched offsets in recent years, so hardcoding the offset isn't necessarily the best approach. It certainly won't work for time zones that have DST, unless you're determining the correct offset in your server-side code.

If you want an approach that will work correctly in any time zone, you'll need to use a library, as described here.

For example, using the date-fns-tz extension to date-fns:

zonedTimeToUtc("2019-03-05 05:00:00", "Europe/Moscow").getTime();

Or using Luxon:

DateTime.fromISO("2019-03-05T05:00:00", { zone: "Europe/Moscow" }).toMillis()