pikaday日期未从php表单发送

Question

I have searched here and not found a question like mine so I hope someone can help.

I am using Pikaday responsive in two fields of a form. A "from" date and a "to date" Everything looks OK on the form and the dates chosen appear correctly in the form fields, but for some reason the dates are not being sent with the rest of the data from the form.

Here is my html:

  <p>
    <label>BOOK FROM:</label><br />
    <input name="bookfrom" type="date" id="date1" required />&nbsp;<button id="clear" class="SubmitButton">Clear</button>
  </p>


  <p>
    <label>BOOK TO:</label><br />
    <input name="bookto" type="text" id="date2" required />&nbsp;<button id="clear2" class="SubmitButton">Clear</button>
  </p>

and here is my script at the bottom of the page:

<script src="../js/dependencies/jquery.min.js"></script>
<script src="../js/dependencies/moment.min.js"></script>
<script src="../js/dependencies/pikaday.min.js"></script>
<script src="../js/pikaday-responsive.js"></script>
    <script>
       var $date1 = $("#date1");
      var instance1 = pikadayResponsive($date1, {
        format: "Do MMM YYYY",
        outputFormat: "X"
      });
      $date1.on("change", function() {
        $("#output1").html($(this).val());
      });

      $("#clear").click(function() {
        instance1.setDate(null);
      });

        var $date2 = $("#date2");
      var instance2 = pikadayResponsive($date2, {
        format: "Do MMM YYYY",
        outputFormat: "X"
      });
      $date2.on("change", function() {
        $("#output2").html($(this).val());
      });

      $("#clear2").click(function() {
        instance2.setDate(null);
      });
    </script>

after the form has been sent the following test php code:

$startdate=$_POST['bookfrom'];
echo 'Date from= ' . $startdate . '<br><br>';
$enddate=$_POST['bookto'];
echo 'Date to= ' . $enddate . '<br><br>';
exit();

returns:

Date from=

Date to=

there should be a date code after each = sign, but there is nothing.

I should say that I am very new to working with JavaScript/query and I think it is probably something to do with that causing the problem. I have given the input fields names in the same way as the others in the form and the others all transfer correctly. It is just these two date fields that are not getting through.

Because of the JavaScript, should

$startdate=$_POST['bookfrom'];

and

$enddate=$_POST['bookto'];

be something else? I have tried:

$startdate=$_POST['date1'];
echo 'Date from= ' . $startdate . '<br><br>';
$enddate=$_POST['date2'];
echo 'Date to= ' . $enddate . '<br><br>';
exit();

and some other variations using terms in the script instead of the input field names but still get the same result.

In the head tag of the page I also have:

 <link rel="stylesheet" href="../css/pikaday-package.css">
 <script src="../js//pikaday-responsive-modernizr.js"></script>

I would appreciate any help.

Best wishes

Tog

Answer 1

This is a shot in the dark becasue I'm not entirely familiar with Pikaday, but when I used it I generated it like this:

var timepicker = new Pikaday({
field: document.getElementById('datepicker'),
firstDay: 1,
minDate: new Date(2016, 0, 1),
maxDate: new Date(2100, 12, 31),
yearRange: [2016,2100],
showTime: true,
autoClose: false,
use24hour: false,
format: 'YYYY-MM-dd'

So my guess is that you generated it incorrectly? Give it a try, but like I said it's a shot in the dark.

Answer 2

What an idiot I am. I spent many hours over two days on this and now the solution hits me like a frieght train. A silly (very silly) typo.

I had:

<script src="../js//pikaday-responsive-modernizr.js"></script>

and it should have been:

<script src="../js/pikaday-responsive-modernizr.js"></script>

Amazing what an extraneous / can do :-)