Countdown timer with dynamic date

• 

  • horrobili

  • February 21, 2021 at 7:42 am

  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
• 

  

  • John Huebner

  • March 13, 2021 at 1:21 am

  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.