Support

Account

Home Forums Front-end Issues Countdown timer with dynamic date

Unread

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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.