Set the countdown to date and time, with client's timezone
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
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.
javascript timezone countdown timezone-offset
add a comment |
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.
javascript timezone countdown timezone-offset
add a comment |
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.
javascript timezone countdown timezone-offset
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.
javascript timezone countdown timezone-offset
javascript timezone countdown timezone-offset
edited Nov 14 '18 at 9:17
Andreas
2,06831523
2,06831523
asked Nov 14 '18 at 8:50
PassingByPassingBy
113
113
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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()
I see. I've changed the time to 01:00:00 GMT, as it seems a little bit easier to use the GMT time, however, when i try to check it from Geokeeper, it shows NaNs every time. If needed, i can provide the github repo.
– PassingBy
Nov 23 '18 at 6:31
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53296183%2fset-the-countdown-to-date-and-time-with-clients-timezone%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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()
I see. I've changed the time to 01:00:00 GMT, as it seems a little bit easier to use the GMT time, however, when i try to check it from Geokeeper, it shows NaNs every time. If needed, i can provide the github repo.
– PassingBy
Nov 23 '18 at 6:31
add a comment |
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()
I see. I've changed the time to 01:00:00 GMT, as it seems a little bit easier to use the GMT time, however, when i try to check it from Geokeeper, it shows NaNs every time. If needed, i can provide the github repo.
– PassingBy
Nov 23 '18 at 6:31
add a comment |
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()
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()
edited Nov 15 '18 at 20:34
answered Nov 15 '18 at 20:28
Matt JohnsonMatt Johnson
143k42289415
143k42289415
I see. I've changed the time to 01:00:00 GMT, as it seems a little bit easier to use the GMT time, however, when i try to check it from Geokeeper, it shows NaNs every time. If needed, i can provide the github repo.
– PassingBy
Nov 23 '18 at 6:31
add a comment |
I see. I've changed the time to 01:00:00 GMT, as it seems a little bit easier to use the GMT time, however, when i try to check it from Geokeeper, it shows NaNs every time. If needed, i can provide the github repo.
– PassingBy
Nov 23 '18 at 6:31
I see. I've changed the time to 01:00:00 GMT, as it seems a little bit easier to use the GMT time, however, when i try to check it from Geokeeper, it shows NaNs every time. If needed, i can provide the github repo.
– PassingBy
Nov 23 '18 at 6:31
I see. I've changed the time to 01:00:00 GMT, as it seems a little bit easier to use the GMT time, however, when i try to check it from Geokeeper, it shows NaNs every time. If needed, i can provide the github repo.
– PassingBy
Nov 23 '18 at 6:31
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53296183%2fset-the-countdown-to-date-and-time-with-clients-timezone%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown