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>
5
  • On which page you want to add this code? Commented Mar 29, 2017 at 8:31
  • which place have you defined $time variable? Commented Mar 29, 2017 at 8:39
  • jaimin@@ adding grid.html page Commented Mar 29, 2017 at 8:46
  • Rakesh@ $times varrible define on top of grid.html page@ but can suggest me a better script Commented Mar 29, 2017 at 8:48
  • well I have done this @ Commented Mar 29, 2017 at 9:05

3 Answers 3

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();
8
  • Dear Rakes Thanks for this wonderful support @But Result is showing this string not a date.. "NaNd NaNh NaNm NaNs" @ please help Commented Mar 29, 2017 at 9:29
  • what is the value of specialDate variable please let me know Commented Mar 29, 2017 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. Commented Mar 29, 2017 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 Commented Mar 29, 2017 at 9:34
  • how can i get which value is Return Commented Mar 29, 2017 at 9:38
2

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

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>
1
  • Can you correct the js code , its will big help from your side Commented Mar 29, 2017 at 9:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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