0

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>
  • On which page you want to add this code? – Jaimin Sutariya Mar 29 '17 at 8:31
  • which place have you defined $time variable? – Rakesh Jesadiya Mar 29 '17 at 8:39
  • jaimin@@ adding grid.html page – Sanjay Yadav Mar 29 '17 at 8:46
  • Rakesh@ $times varrible define on top of grid.html page@ but can suggest me a better script – Sanjay Yadav Mar 29 '17 at 8:48
  • well I have done this @ – Sanjay Yadav Mar 29 '17 at 9:05
0
  <?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();
  • Dear Rakes Thanks for this wonderful support @But Result is showing this string not a date.. "NaNd NaNh NaNm NaNs" @ please help – Sanjay Yadav Mar 29 '17 at 9:29
  • what is the value of specialDate variable please let me know – Rakesh Jesadiya Mar 29 '17 at 9:30
  • You have to first check return value of $_item->getData('special_to_date') php variable if its valid date then and then its working in your js otherwise date format is not proper you have to first set proper date format in php and then apply value. – Rakesh Jesadiya Mar 29 '17 at 9:32
  • Dear Rakes This code is working in php $_item->getData('special_to_date') and showing result like this 2017-03-30 00:00:00 – Sanjay Yadav Mar 29 '17 at 9:34
  • how can i get which value is Return – Sanjay Yadav Mar 29 '17 at 9:38
1

To use a php variable in jquery you could use the following version:

Updated your code , check below

<?php echo $date = $_product->getSpecialToDate();?>

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

        console.log(countDownDate);
        console.log(now);
        console.log(distance);
        // 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>
  • Can you correct the js code , its will big help from your side – Sanjay Yadav Mar 29 '17 at 9:21
1

I recommend using Require JS for this as it's best practice (writing JS in PHTML templates is not good!), it's consistent with how Magento handle it, and it allows you to pass PHP through to JS.

Here is an example of how to do it:

Template file

Here we we load our JS and pass through our PHP, I am passing through some text rendered in PHP but this can be any PHP as far as I'm aware.

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "example-scope": {
                    "component": "Magento_Cms/js/knockout-example",
                    "exampleMessage": "<?= __('Hello Magento Stack Exchange!') ?>"
                }
            }
        }
    }
}
</script>

<div data-bind="scope: 'example-scope'">
    <h2 data-bind="text: message"></h2>
</div> 

Javascript file (component)

define(['ko', 'uiComponent'], function(ko, Component) {
    'use strict';

    return Component.extend({
        // Optionally you can overwrite the variable
        defaults: {
            exampleMessage: 'Hello?'
        },

        initialize: function() {
            this._super();
            this.message = ko.observable(this.exampleMessage);
        }
    });
});

This is taken from another answer I've provided here - How to use Knockout JS within Magento 2

Results

Here is my example without overwriting my message: enter image description here

And here is my example with the message being overwritten in the JS: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.