如何将第一页的所选日期选择器值显示到第二页日期选择器

Question

我在酒店预订网站上工作。我在主页上有基本表格，包括入住、退房、成人人数、儿童人数。当用户输入这些详细信息并单击 "Book Now" 时，将加载具有更多输入字段的另一个页面（预订页面）。在此页面上，我想显示上一页中选择的值。我可以显示下拉值，但无法将上一页的日期选择器值显示到本页的日期选择器字段中。如何让日期选择器值显示在第二页日期选择器字段上？感谢您的帮助。

我已经尝试 POST 日期选择器输入字段中的值，但没有成功。我可以将第一页日期选择器值作为文本获取到 POST，但不在日期选择器字段中。

这是主页上的日期选择器输入字段

<div class="booking_dropdown">
    <input type="text" class="datepicker booking_input booking_input_a booking_in" placeholder="Check in" required="required" name="checkin">
</div>
<div class="booking_dropdown">
    <input type="text" class="datepicker booking_input booking_input_a booking_out" placeholder="Check out" required="required" name="checkout">
</div>

这是第二页日期选择器输入字段

<div class="booking_dropdown">
    <input type="text" id="checkin" class="datepicker booking_input booking_input_a booking_in" placeholder="Check in" required="required" name="checkin" value="<?php echo date_format(date_create($_POST['checkin']),"d/m/Y");?>">
</div>
<div class="booking_dropdown">
<input type="text" id="checkout" class="datepicker booking_input booking_input_a booking_out" placeholder="Check out" required="required" name="checkout" value="<?php echo date_format(date_create($_POST['checkout']),"d/m/Y");?>">
</div>

这是第 2 页的日期选择器代码 - 已更新

function initDatePicker()
{
   if($('.datepicker').length)
   {
      $("#checkin").datepicker({
         minDate: 0,
         onSelect: function (date) {
            var date2 = $('#checkin').datepicker('getDate');
            date2.setDate(date2.getDate());
            $('#checkout').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#checkout').datepicker('option', 'minDate', date2);
         }
      });

      $('#checkout').datepicker({
        onClose: function () {
           var dt1 = $('#checkin').datepicker('getDate');
           var dt2 = $('#checkout').datepicker('getDate');
           //check to prevent a user from entering a date below date of dt1
           if (dt2 <= dt1) {
              var minDate = $('#checkout').datepicker('option', 'minDate');
              $('#checkout').datepicker('setDate', minDate);
           }
        }
     });

   }
}

我希望从第一页选择的日期选择器值显示在第二页的日期选择器字段中，但它不显示第一页的日期选择器值。我希望日期格式为 dd/mm/yyyy.

Answer 1

也许当您初始化 jquery-ui-datepicker 时，日期会被替换。

您可以在第二页的 JavaScript 中尝试：

$('#checkin').datepicker("setDate", new Date(<?php echo $_POST['checkin']; ?>) );

jQuery-UI datepicker default date

Answer 2

尝试更改

<input type="text">

到

<input type="date">

在两个页面中

更新：对于 jqueryui

<input type="text" value="<?php echo date_format(date_create($_POST['checkin']),"Y-m-d");?>">

更新 2：

<input type="text" id="checkin" class="datepicker booking_input booking_input_a booking_in" name="checkin" value="<?php echo $_REQUEST["checkin"] ?>">
<input type="text" id="checkout" class="datepicker booking_input booking_input_a booking_in" name="checkout" value="<?php echo $_REQUEST["checkout"] ?>">

如何将第一页的所选日期选择器值显示到第二页日期选择器

How to display the selected datepicker value from the 1st page onto the 2nd page datepicker

html

javascript

php

forms

jquery-ui-datepicker