How can I used Magento php variable with java-script

Question

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>

• Jaimin Sutariya: On which page you want to add this code?
• Rakesh Jesadiya: which place have you defined $time variable?
• Sanjay Yadav: jaimin@@ adding grid.html page
• Sanjay Yadav: Rakesh@ $times varrible define on top of grid.html page@ but can suggest me a better script
• Sanjay Yadav: well I have done this @

Answer 1

 <?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();

• Sanjay Yadav: Dear Rakes Thanks for this wonderful support @But Result is showing this string not a date.. "NaNd NaNh NaNm NaNs" @ please help
• Rakesh Jesadiya: what is the value of specialDate variable please let me know
• Rakesh Jesadiya: 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.
• Sanjay Yadav: 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: how can i get which value is Return

Answer 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

Answer 3

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>

• Sanjay Yadav: Can you correct the js code , its will big help from your side