How to Use Magento PHP Variable with JavaScript

javascriptjquerymagento-2.1PHP

I am trying print Magento current date value in javascript counter Functions but it only shows the result of some strings.

Here is php variable:

 <?php echo $date=$_item->getData('special_to_date');?>

HERE is the js code I want to use $data variable in my js date function:

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

      // 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>

Best Answer

  <?php
            //php code
    ?>
   <script>
    // Set the date we're counting down to
    //var countDownDate = new Date("Jan 5, 2018 15:37:25").getTime();
    var specialDate = "<?php echo $_item->getData('special_to_date');?>";
    var countDownDate = new Date(specialDate).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);

    // 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>

Inside phtml file, You can use above way,

 var specialDate = "<?php echo $_item->getData('special_to_date');?>";
 var countDownDate = new Date(specialDate).getTime();
Related Topic