Расчет пользовательских полей в WordPress с использованием Javascript

Question

Я реализовал код ниже на моем сайте, чтобы отобразить таймер запуска. Сайт работает на Wordpress. На данный момент дата вводится в коде (поэтому применяется сайт в целом). Я хочу, чтобы на каждом посте был запущен таймер.

Мне нужно изменить приведенный ниже код, чтобы можно было использовать настраиваемое поле в каждом сообщении, называемое «срок действия», в качестве даты вместо аппаратной даты ниже (newDate ("5 января 2021 15:37:25) .getTime ()

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").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>

Приведенный выше код получен с здесь

Мой сайт здесь

Заранее спасибо

Answer 1

ниже шагов ваши требования:

1) в поле истечения пользовательского поля установите формат возврата как пользовательский "F j, Y g: i: s"

пример ссылки (https://prnt.sc/pqg79l)

2) добавьте эту функцию в functions.php

function functionname() {

    global $post;

    $field= get_field('expiry_date', $post->ID);
        echo '<input type="hidden" id="date" value="'.$field.'">';  
     }
    add_action( 'template_redirect', 'functionname' );

3) в ваш файл js добавьте ниже скрипт

 var $= jQuery;

    var d = $("#date").val();
    console.log(d);
    // Set the date we're counting down to
    var countDownDate = new Date(d).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);

убедитесь, что вам нужно добавить <p id="demo"></p>где вы хотите показать в посте

Я попробовал этот код .. Он полностью работает нормально. Надеюсь, я помог вам этим