javascript - 用于预订系统的 JavaScript 日期选择器

Question

我在一个类似于酒店预订系统的网站上工作。用户可以使用该网站预订房间。

这些是不可用的日期：

['2021-11-17', '2021-11-18', '2021-11-19', '2021-11-20', '2021-11-27', '2021-11-28']

在我的日期选择器中，我希望这样做：

1. 仅限未来日期，退房日期不得早于入住日期
2. 将不可用的日期灰显，使用户无法选择它们
3. 如果用户选择在 2021-11-11 入住，则退房选项范围直到 2021-11-16

我现在的 JS：

const dateCheck = ['2021-11-17', '2021-11-18', '2021-11-19', '2021-11-20', '2021-11-27', '2021-11-28']

function disableDates(date) {
  var string = jQuery.datepicker.formatDate("yy-mm-dd", date);
  return [dateCheck.indexOf(string) == -1]
}


$("#listingCheckIn").datepicker({
  beforeShowDay: disableDates,
  minDate: 0,
  dateFormat: "yy-mm-dd",
  showOn: "both",
  //upon selection     
  onSelect: function(dateText, inst) {
    $("#listingCheckOut").datepicker("option", "minDate",
      $("#listingCheckIn").datepicker("getDate")); //2nd datepicker to set min value for 1st datepicker
  }
});

$("#listingCheckOut").datepicker({
  beforeShowDay: disableDates,
  minDate: 0,
  dateFormat: "yy-mm-dd",
  onSelect: function(dateText, inst) {
    $("#listingCheckOut").datepicker("option", "minDate",
      $("#listingCheckIn").datepicker("getDate")); //2nd datepicker to set min value for 1st datepicker
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

<form action="booking.php" id="bookingForm" method="post">
  <div id="C_rightColumn">
    <div class="C_rcTopBox flex-c-c">
      Rates
    </div>

    <div class="C_rcTopBox flex-c-c">
      <label>Check-In Date</label>
      <input type="text" id="listingCheckIn" name="checkin" class="date">
    </div>

    <div class="C_rcTopBox flex-c-c">
      <label>Check-Out Date</label>
      <input type="text" id="listingCheckOut" name="checkout" class="date">
    </div>

    <div class="C_rcBtmBox">
      <button type="submit" class="btn" name="bookProperty">Book Now!</button>
    </div>
  </div>
</form>

基本上，1 和 2 是可行的，但是我如何实现 3 以便用户必须在其他预订的签入之前签出？提前致谢。

标签： javascripthtmljquery