0

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

Improve this question
4
  • others have suggested using <?php echo but that doesn't work inside the script. Commented Oct 10, 2014 at 12:35
  • There was was an extra right bracket ")" in the PHP code in the HTML form. I fixed that for you. Commented Oct 10, 2014 at 12:51
  • thanks but could you tell me the exact line the extra ")" was on? I can't find it in my code?? Commented Oct 10, 2014 at 13:31
  • Never mind, it's my bad. There is no extra ")". Sorry for the confusion. Commented Oct 10, 2014 at 13:34

6 Answers 6

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

where do you place the var phpdate line?
in the setDate line phpdate has to be a date object so this doesn't work. the solution below by Guillaume works but all the other responses do not. Really appreciate everyone's help
this almost works and is elegant. place var phpDate before $("#mydate").datepicker{ and change it to var phpDate = new Date("<?php echo $default_date;?>");
or change $('#mydate')[...] to $('#mydate').datepicker('setDate', new Date(phpDate)); depending on what you like better
You need to place it with in the <script> tag in head section or at the end.
0

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.

Improve this answer

4 Comments

@rss81 i will add explanation when I get time so you can understand whats going on ;)
I really appreciate your help.
Hi, since $default_date is already in the right format I found that the following works too: <?php echo $default_date ?>
@rss81 correct ! You understand the code I see, welldone :) I updated the answer as promised
0

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

Improve this answer

1 Comment

I've tried this and it just defaults to the current date. It does not work but thanks for trying
0

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

Improve this answer

Comments

0

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");
Improve this answer

2 Comments

i tried this but it just doesn't work.this is so frustrating. where do you place the var line? what format should the date be in?
Well, I don't know about the specific format accepted by the datepicker, but you can define the variable date in the anonymous javascript function where you call the datepicker. I supposed that the $default_date variable was already in the right format.
0

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 ");
Improve this answer

Comments

Your Answer

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