I have this code but the only thing is I can't figure out how to add a time zone to it. I have the date set but no time zone. How would I add it to the countDownDate?
// Set the date we're counting down to
var countDownDate = new Date("May 8, 2018 16:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
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 = "<p>" + hours + ":" + minutes + ":" + seconds + "</p>";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "expired";
}
}, 1000);
<div id="countdown"></div>
New Date() objects are in the system's local timezone. If you want to set a timezone directly, one way to do so would be to create your time in UTC time and then add the offset of the local timezone you are looking for.
let dateUTC = new Date(Date.UTC('...'))
let offset = (60*60*1000) * 4 // EST would be UTC+4, hence 4 * the number of ms in an hour.
let dateEST = dateUTC+offset
An alternative would be to just use a date string, with the timezone specified:
let dateEST = new Date('2018-05-08T14:45:00+0400') //The '+0400' is the '+4' for EST.
EDIT: Just tried adding "GMT" to my date variable and it works. Didn't think that would.
So I now have:
var countDownDate = new Date("May 8, 2018 16:00:00 GMT").getTime();
And I set the time +/- from my time zone and it works.
Related
I'm trying to get a dynamic date from a span with the id datetime and use that date for a countdown timer. But I see Nan all the time
<span id="datetime">30.11.2022 08:50:00</span>
<p id="demo"></p>
<script>
var enddateTime = document.getElementById('datetime').textContent;
// Set the date we're counting down to
var countDownDate = new Date(enddateTime).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);
// Display the result in the element with id="demo"
document.getElementById("demo").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("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
I tried using .textContent to get the field value
var enddateTime = document.getElementById('datetime').textContent;
Everything is fine in the console, but when I use in the timer script, I get NaN
const newDate = new Date('30.11.2022 08:50:00');
console.log(newDate); // Invalid Date
Your date format is simply invalid. Try for example using '2022-11-30 08:50:00' as your date.
<span id="datetime">2022-11-30 08:50:00</span>
More here.
<span id="datetime">30.11.2022 08:50:00</span>
This value inside HTML element is invalid format date in Js.
You should change the value to 2022-11-30 08:50:00. This is YYYY-MM-DD HH:mm:ss Date format in js.
I have been trying to get this counter to display remaining day to a set date, then, display a message on the set date and finally hide the message after the date has passed.
Here is what I have so far...
// Set the date we're counting down to
var countDownDate = new Date("June 26, 2022 1:01: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="countdown"
if (distance > 0) {
document.getElementById("countdown").innerHTML = days + " days until the June 30th, 2022";
} else if (distance == 0) {
document.getElementById("countdown").innerHTML = "Time To Vote";
} else {
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
The script above shows countdown of days left and "EXPIRED" when the date counter ends, but it does not show the message "Time to Vote" on the set day.
Thank you for your help!
I have a limited knowledge, and a small reputational score to comment, on what you are doing, but are you also factoring in that new Date().getTime() returns epoch milliseconds?
Meaning that, if the epoch milliseconds of that date, does not exactly match the current epoch milliseconds, it will not run.
So, the Epoch of the date may be (example) 1000 but the current epoch can be 1001, and it would not work.
You could try matching the individual time units using new Date().getHours(), new Date().getSeconds(), etc, to limit how far down it should check.
EDIT: I haven't tested, and this is probably a terrible idea, but you could remove the last 5 or so digits of both epoch timestamps either by dividing and calling .toFixed() or making it a string and using String.slice(), then compare them
you can do something like this
var countDownDate = new Date("June 26, 2022 0: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="countdown"
if (days > 0) {
const time = [hours, minutes, seconds].map(s => s.toString().padStart(2, '0')).join(':')
document.getElementById("countdown").innerHTML = `${days} days and ${time} until the June 30th, 2022`;
} else if (days === 0) {
document.getElementById("countdown").innerHTML = "Time To Vote";
} else {
document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);
<div id="countdown"></div>
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/
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)
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>
I have a countdown that ends at a specific time and date.
Is it possible to set a starting date for the countdown?
Start: June 14, 2018 15:00:00
End: June 17, 2018 23:59:59
// Set the date we're counting down to
var countDownDate = new Date("June 17, 2018 23:59:59").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an 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("countdown").innerHTML = "TEXT Countdown" + days + " days, " + hours + " h, "
+ minutes + " min & " + seconds + " sec";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "TEXT after countdown";
}
}, 1000);
<div id="countdown"></div>
Just delay the call to setInterval until the time you want. Your best bet, since timers get throttled on inactive tabs, is to check periodically and then kick things off when the time arrives:
var waitingTimer = setInterval(function() {
if (Date.now() < Date.parse("2018-06-14T15:00:00")) {
return;
}
clearInterval(waitingTimer);
// ...start the countdown
}, 1000);
You might want to express the time in UTC, since unfortunately the spec on what those strings mean without a timezone indicator changed (twice), whereas if you put the time in UTC and add a Z to the string, it's reliable.