Vincent DUPONT Vincent DUPONT - 7 months ago 35
Javascript Question

Data recovery from jQuery DatePicker does not work

the Data recovery from jQuery DatePicker does not work. $dateDebut and $dateFin are empty.. I do not understand why. I recovered data from #from and #to but my 2 echo test doesn't work.



<script>
$(function() {



$( "#from" ).datepicker({
defaultDate: "+1d",
changeMonth: true,
numberOfMonths: 1,
dateFormat : '@',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
dateFormat : '@',
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
var currentDate = $( ".selector" ).datepicker( "getDate" );
}
});
});
</script>

<label for="from">Du</label>
<input type="text" id="from" name="from">
<label for="to">Au</label>
<input type="text" id="to" name="to">

<?php
$dateDebut = $_POST[‘from’] ;
$dateFin = $_POST[‘to’] ;
echo('La date est : ' . $dateDebut);
echo($dateFin);
?>





Thanks in advance.

Answer

If you wrap your datepicker <input> elements in a <form>, and set the action to the same page, you can check the $_POST variable on the same page after submitting the form. Without submitting, PHP will have no way to obtain the variables. You could alternatively look into AJAX if you're attempting to use the dates in your server-side script without submitting/refreshing the page.

Here's how you could set it up in one file:

<!doctype html>
<html>
  <head>
    <title>Page Title Here</title>
    <link rel='shortcut icon' href='favicon.ico'>
    <!-- include stylesheet for jquery ui -->
    <link rel='stylesheet' href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
  </head>
  <body>
    <?php
      //check if the dates have been posted
      //assign the dates to variables if they've been posted,
      //otherwise assign them the value of false
      $dateDebut = isset($_POST['from'])?$_POST['from']:false;
      $dateFin = isset($_POST['to'])?$_POST['to']:false;
    ?>

    <!-- the form which contains our datepickers -->
    <form action='./' method='POST'>
      <label for='from'>Du</label>
      <input name='from' id='from'>
      <label for='to'>Au</label>
      <input name='to' id='to'>
      <input type='submit' value='Submit'>
    </form>

    <?php
      //print the dates if they were posted (if they aren't set to false)
      if(false !== $dateDebut){
        //start date ms timestamp
        echo 'start date timestamp (ms) : '.$dateDebut."<br>";
        //start date formatted
        echo 'start date (date format - mm/dd/yyyy): '.date("m/d/Y", ($dateDebut / 1000))."<br>";
      }
      if(false !== $dateFin){
        //end date timestamp
        echo 'end date timestamp (ms) : '.$dateFin."<br>";
        //end date formatted
        echo 'end date (date format - mm/dd/yyyy): '.date("m/d/Y", ($dateFin / 1000))."<br>";
      }
    ?>
    <!-- include jquery and jquery-ui -->
    <script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
    <script>
      //setup datepickers
      $('[name=from]').datepicker({
        defaultDate: "+1d",
        changeMonth: true,
        numberOfMonths: 1,
        dateFormat : '@',
        onClose: function( selectedDate ) {
          $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
      });
      $('[name=to]').datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        dateFormat : '@',
        onClose: function( selectedDate ) {
          $( "#from" ).datepicker( "option", "maxDate", selectedDate );
          var currentDate = $( ".selector" ).datepicker( "getDate" );
        }
      });
    </script>
  </body>
</html>