How can I pass PHP variable to Datepicker in jQuery?

问题

I'm trying to set the default date in datepicker with a variable I pass into the html from PHP. Here's a simplified version of both my control file and form:

control file:

<?php
  function render($template, $values = []) {        
      // extract variables into local scope
         extract($values);           

      // render template
         require("$template");
}

  $default_date = date("m/d/Y") ;       
  $default_date = strtotime($default_date);
  $default_date = $default_date + 604800;
  $default_date = date("Y,m-1,d",$default_date);
  render("index_month2_form.php",['default_date'=> $default_date]);
?>

and here is the form:

<!doctype html>
<html lang="en">
 <head>
  <?php print "$default_date"; ?> 
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="jqueryui/css/swanky-purse/jquery-ui-1.10.4.custom.css">
  <script src="/jqueryui/jquery-1.11.1.min.js"> </script>
  <script src="jqueryui/js/jquery-ui-1.10.4.custom.min.js"></script>  
  <script type="text/javascript">
      $(function() { 
       $("#mydate").datepicker ({
          onSelect: function(dateText, inst) {
                 var dateAsString = dateText;     
                 var date = $('#mydate').val();       
          }
       }) 
       //.datepicker("setDate",new Date());  
       .datepicker("setDate",new Date(2014,10-1,17));  
      });  
  </script>   
 </head>
 <body> 
  <p>Date: <input type="text" id="mydate"></p> 
 </body>
</html>

If I use the commented line for setDate I get the current date. If I use the line I have I get the date 7 days forward. When I print $default_date at the top of the form I get 2014,10-1,17 but I can't firgure out of way to pass this into the script. Others have suggested using

回答1:

using echo is the way to go.
I would rather put it in the script rather than the input
I assume $default_date === "2014,10-1,17"

$(function() { 
       $("#mydate").datepicker ({
          onSelect: function(dateText, inst) {
                 var dateAsString = dateText;     
                 var date = $('#mydate').val();       
          }
       }) 
       //.datepicker("setDate",new Date());  
       .datepicker("setDate",new Date(
<?php
     $date = explode(',', $default_date);
     echo $date[0] .  ',' . $date[1] . ',' . $date[2]; 
?>
     ));  
};

edit:
As rss81 noticed it, destructuring the string to rebuild the exact same string is quite dumb. I dont know what I was thinking...
Nevertheless I'll let it like this for educational purpose.

exploding the string enables us to get an array of the string of each chunk separated by a coma. You could use it to reorder the string. For instance if you wanted to transform "2014,10-1,17" to "10-1,2014,17" that would be done by echo $date[1].','.$date[0].','.$date[2]

Echo enables us to output the html page as we like, making it dynamic. So here we are preprocessing the date argument of the .datepicker() by php.

回答2:

The better solution is to assign returned PHP date variable to jQuery variable.

This can be done by following

var phpDate = "<?php echo $default_date; ?>";

Now, you need to assign that to datepicker

$("#mydate").datepicker("setDate",phpDate);

This works...

回答3:

Just give the input the relative value

<input type="text" id="mydate" value="<?php echo $yourdate; ?>">

This will init datepicker with you date value

Hope this helped and my apologies if this is not what you were looking for

回答4:

You can use <?php echo not in the script, but in the body, in some display:none element with id. And then just to get the date with javascript from that element and set to datapicker

回答5:

You could pass the $default_date value in a data attribute of an html element. For example:

<p id="myDate" data-date="<?php echo $default_date; ?>"></p>

After that you can extract it with with Jquery like this:

var date = $("#myDate").data("date");

回答6:

You need to set date format in javascript part because it's create and problem with date.

You can set it given below

$("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd ");

来源：https://stackoverflow.com/questions/26299525/how-can-i-pass-php-variable-to-datepicker-in-jquery

标签

javascript

php

jquery

datepicker