我的 Datepicker 系统有问题（禁用日期）

Question

我的预订系统有一个日期选择器，但它不适用于 1 个示例。我有 2 个日期供员工填写。如果我保存入住日期 (mm/dd/yy) 01/01/2020 并且退房日期是 01/05/2020。然后如果我想编辑预订数据。我无法将退房日期更改为 01/03/2020，因为 1 到 5 现在是禁用日期。

我的问题是是否有人知道如何处理这个问题。也许我需要为另一个系统编写代码来处理禁用日期。但我想知道是否有人知道如何仅使用 日期选择器 来做到这一点。我更喜欢那样。

我使用 flatPickr 作为 Jquery 的日期选择器。我使用 PHP 从数据库中获取禁用日期，并将其作为数组加载到日期选择器的禁用日期函数中。

让我知道你的想法，如果你有提示和提示也可以回答我。

感谢您的宝贵时间

HTML代码

<div class="form-group row">
<label for="date" class="col-4 col-form-label">Check in</label>
<div class="col-8">
<input id='from1' type='text' name='dateFrom1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off"  />
</div>
</div>
<div class="form-group row">
<label for="date" class="col-4 col-form-label">Check out</label>
<div class="col-8">
<input id='to1' type='text' name='dateTo1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off"  />
</div>
</div>

日期选择器代码jquery。数据库中的日期和代码在两个日期之间获取所有日期并放置在 disable[] 函数中，变量 $strBlockA

 $('#from1').flatpickr({
     onChange: function(selectedDates, dateStr, instance) {
       endPicker.set('minDate', selectedDates[0]);
     },

     allowInput: true,
     dateFormat: "m/d/yy",
     disable: [<?php echo implode(',',array_unique(explode(',', $strBlockA))); ?>],
   });

   endPicker = flatpickr("#to1", {
   allowInput: true,
   dateFormat: "m/d/yy",
   disable: [<?php echo implode(',',array_unique(explode(',', $strBlockA))); ?>],

   });

从数据库中获取日期并获取其间所有日期的代码

  //Camping Block A
     $sql = "SELECT dateFrom,dateTo from campinginformation WHERE dateFrom IS NOT NULL AND dateTo IS NOT NULL AND dateFrom != '' AND dateTo != '' AND chooseCamping = 'Caravan of camper (kleine plaats)'";
     $statement = $connect->prepare($sql);
     $success = $statement->execute();

     $strBlockA = '';
        while ($output = $statement->fetch(PDO::FETCH_ASSOC)) {

               // Specify the start date. This date can be any English textual format
                    $date_from = $output["dateFrom"];
                    $date_from = strtotime($date_from); // Convert date to a UNIX timestamp

                    // Specify the end date. This date can be any English textual format
                    $date_to = $output["dateTo"];
                    $date_to = strtotime($date_to); // Convert date to a UNIX timestamp

                    // Loop from the start date to end date and output all dates inbetween
                    for ($i=$date_from; $i<=$date_to; $i+=86400) {
                        $strBlockA .= "'".date("m-d-y", $i)."',";
                    }

           }


           $strBlockA .= rtrim($strBlockA,",");

Answer 1

这就是我要做的。我会尽力解释，因为我不知道您的完整数据库设置。

您在这里的查询是从系统中选择所有保留日期。

$sql = "SELECT dateFrom,dateTo from campinginformation WHERE dateFrom IS NOT NULL AND dateTo IS NOT NULL AND dateFrom != '' AND dateTo != '' AND chooseCamping = 'Caravan of camper (kleine plaats)'";

我假设每一行也有一个 ID？

您应该从该查询中排除当前预订（正在编辑的预订）的 ID，这样可以腾出可用的日期。

所以像这样：

$thisReservation = 0; //get the reservation ID of the one being edited

$sql = "SELECT dateFrom,dateTo from campinginformation WHERE dateFrom IS NOT NULL AND dateTo IS NOT NULL AND dateFrom != '' AND dateTo != '' AND chooseCamping = 'Caravan of camper (kleine plaats)' AND ReservationID !== $thisReservation";

希望对您有所帮助。

Answer 2

对于第一个问题，您可以简单地在查询中添加另一个 where 条件，这样您就可以从搜索中排除当前预订，如下所示：

 ... and reservationID != {$currentReservationID}

然后您将只查看其他预订，这就是您编辑预订时所需的全部内容。

对于后一个问题，您目前是否有两个日期字段，一个入住日期和一个退房日期？如果是这样，解决此问题的最简单方法是使用 range calendar 功能来使用一个日期范围选择器而不是两个日期选择器，这似乎不允许范围内的禁用日期。

如果你这样做，你唯一需要改变的是：

$startDate = $_POST['startDate'];
$endDate = $_POST['endDate'];

你会使用：

$dateRange = $_POST['dateRange'];
$dateRange = explode(" to ", $dateRange);
$startDate = $dateRange[0];
$endDate = $dateRange[1];

但是，如果出于某种原因这对您不起作用，我认为下一个最佳选择是在插入他们的预订之前执行一个简单的 SQL 查询以验证日期是否可用。

您可以在插入他们的查询之前做这样的事情：

select reservationID from campinginformation
where
  dateFrom between "{$startingDate}" and "{$endingDate}"
  or dateTo between "{$startingDate}" and "{$endingDate}"

如果此returns有任何结果，请不要插入他们的预订，并提供失败消息。

Answer 3

我不知道 PHP，但希望这个答案能给您一些提示/确切答案。您的查询会根据注册 ID 为您提供预先保存的入住和退房日期。一旦您知道入住和退房日期，您就可以通过以下代码实现您想要的。希望能帮助到你.. 通过使用下面的代码，之前 selected 的入住和退房日期被禁用到 select。
例如如果您选择 01/02/2020 至 01/05/2020，则这些持续时间将无法进行预订。但您可以选择 01/01/2020 至 01/06/2020。

$('#from1').flatpickr({
  
allowInput: true,
  dateFormat: "m/d/yy",
disable: [
    {
        from: "01/05/2020",
        to: "01/08/2020"
    }
], //your fetched checkin date
});

endPicker = flatpickr("#to1", {
  allowInput: true,
  dateFormat: "m/d/yy",
disable: [
    {
        from: "01/05/2020",
        to: "01/08/2020"
    }
], //your fetched checkin date

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flatpickr@4.6.3/dist/flatpickr.js"></script>
<link href="https://unpkg.com/flatpickr@4.6.3/dist/flatpickr.min.css" rel="stylesheet" />
<div class="form-group row">
  <label for="date" class="col-4 col-form-label">Check in</label>
  <div class="col-8">
    <input id='from1' type='text' name='dateFrom1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
  </div>
</div>
<div class="form-group row">
  <label for="date" class="col-4 col-form-label">Check out</label>
  <div class="col-8">
    <input id='to1' type='text' name='dateTo1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
  </div>
</div>

下面的地方只允许 selected 那些以前 selected 的日期。例如，如果您选择 01/02/2020 到 01/05/2020，那么您只能 select 在日期之间编辑

$('#from1').flatpickr({
  onChange: function(selectedDates, dateStr, instance) {
    endPicker.set('minDate', new Date("01/05/2020"));
  },
  minDate: new Date("01/05/2020"), //your fetched checkin date
  allowInput: true,
  dateFormat: "m/d/yy",
  maxDate: new Date("01/08/2020"), //your fetched checkout date

});

endPicker = flatpickr("#to1", {
  allowInput: true,
  dateFormat: "m/d/yy",
  minDate: new Date("01/05/2020"), //your fetched checkin date (may be same /may not) also assume checkin date is 01/04/2020
  maxDate: new Date("01/08/2020"), //your fetched checkout date

});


flatpickr("#to2", {
  allowInput: true,
  mode: 'range',
  dateFormat: "m/d/yy",
  disable: [{
    from: "01/05/2020",
    to: "01/08/2020"
  }],
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/flatpickr@4.6.3/dist/flatpickr.js"></script>
<link href="https://unpkg.com/flatpickr@4.6.3/dist/flatpickr.min.css" rel="stylesheet" />
<div class="form-group row">
  <label for="date" class="col-4 col-form-label">Check in</label>
  <div class="col-8">
    <input id='from1' type='text' name='dateFrom1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
  </div>
</div>
<div class="form-group row">
  <label for="date" class="col-4 col-form-label">Check out</label>
  <div class="col-8">
    <input id='to1' type='text' name='dateTo1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
  </div>
  <div class="form-group row">
    <label for="date" class="col-4 col-form-label">Range mode check in Check in and Check out</label>
    <div class="col-8">
      <input id='to2' type='text' name='dateTo1' data-date="" class='form-control datepickerChange' placeholder="Open date-picker" autocomplete="off" />
    </div>
  </div>

当您在 flatpicker 中使用范围模式时，它不允许您 select 超出阻止日期。正如我在上一个代码中添加的那样，您可以比较范围日期选择器

我的 Datepicker 系统有问题（禁用日期）

A problem with my Datepicker system (disabled dates)

html

php

jquery

flatpickr