Home › Forums › Front-end Issues › Countdown timer with dynamic date
Hello!
So, I’ve got this counter but I want to use it on different pages on a website (its for different starts of different events), I’d like to add the date and time via ACF fields, I don’t care if its text or date/time picker but I can not get it to work….
This is my general, working code:
$(document).ready(function () {
// Set the date we're counting down to
var countDownDate = new Date("Jan 29, 2021 09: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("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("counter").innerHTML = "EXPIRED";
}
}, 1000);
});
This is working fine, I tried to add my acf field like this
$datetext = '<?php echo get_sub_field("date_countertext");?>';
// Set the date we're counting down to
var countDownDate = new Date($datetext).getTime();
but this gives me just “NaN” on the Frontend, I tried different variatons but I’ve got a feeling this is kinda the wrong way, maybe someone have an idea?
Thank you
Ar you returning a date value that will work with this function in the same format?
var countDownDate = new Date("Jan 29, 2021 09:00").getTime();
A date field will only return a date, no time. You would need to use a date time field or set this manually in the code.
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.