酒店预订系统jQuery datepicker如何限制退房日期不跨不可用时段

实现方案 #

你只需要对原有JS逻辑做少量调整，动态计算退房日期的最大可选范围即可，完整修改后代码如下：

const dateCheck = ['2021-11-17', '2021-11-18', '2021-11-19', '2021-11-20', '2021-11-27', '2021-11-28']
// 预处理不可用日期，转为时间戳升序排列，方便后续快速查找
const sortedUnavailableTimestamps = dateCheck.map(dateStr => {
  const [year, month, day] = dateStr.split('-').map(Number)
  return new Date(year, month - 1, day).getTime()
}).sort((a, b) => a - b)

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",
  // 选中入住日期后，动态计算退房日期的可选范围
  onSelect: function(dateText, inst) {
    const checkInDate = $(this).datepicker("getDate")
    const checkInTimestamp = checkInDate.getTime()
    let maxCheckoutDate = null

    // 找到入住日期之后第一个被占用的日期
    for (const ts of sortedUnavailableTimestamps) {
      if (ts > checkInTimestamp) {
        // 最大退房日期为被占用日期的前一天，避免和已有预订冲突
        maxCheckoutDate = new Date(ts - 24 * 60 * 60 * 1000)
        break
      }
    }

    // 同步更新退房日期的可选范围
    $("#listingCheckOut").datepicker("option", {
      minDate: checkInDate,
      maxDate: maxCheckoutDate
    })
  }
});

$("#listingCheckOut").datepicker({
  beforeShowDay: disableDates,
  minDate: 0,
  dateFormat: "yy-mm-dd"
});

逻辑说明

• 先对所有不可用日期做预处理，转成时间戳后升序排列，后续查找效率更高
• 用户选中入住日期后，遍历排序后的不可用日期列表，找到第一个晚于入住日期的被占用时间点
• 将该时间点减1天作为退房日期的最大可选值：比如你选2021-11-11作为入住日期，第一个晚于它的被占用日期是2021-11-17，减1天就是2021-11-16，刚好匹配你的需求
• 如果入住日期之后没有被占用的日期，maxDate设为null，jQuery datepicker会自动不限制最大可选时间
• 删除了原退房日期选择器中重复设置minDate的冗余逻辑，避免无效代码执行

内容的提问来源于stack exchange，提问作者jfvii