解决easepick插件日期范围选择中锁定日期显示异常问题

问题核心是原filter逻辑在选中起始日后，对所有已预订区间的判断规则做了全局修改，导致后续锁定区间整体偏移。我们需要仅针对起始日次日且为他人入住日的特殊日期放开限制，其余已预订日期保持原有锁定逻辑。

修改LockPlugin中的filter函数如下：

filter(date, picked) {
  if (picked.length === 0) {
    // 未选中日期时，正常锁定已预订区间（[) 包含入住日，不包含退房日）
    return date.inArray(bookedDates, '[)');
  } else {
    const startDate = picked[0];
    // 计算起始日的次日
    const nextDay = startDate.clone().add(1, 'day');
    // 检查当前日期是否是起始日次日，且该次日是某个已预订区间的起始日
    const isAllowedCheckout = date.isSame(nextDay, 'day') && 
      bookedDates.some(range => range[0].isSame(nextDay, 'day'));
    
    if (isAllowedCheckout) {
      // 允许该日期作为退房日，不锁定
      return false;
    }
    
    // 其余日期保持未选中时的锁定逻辑，避免区间偏移
    return date.inArray(bookedDates, '[)');
  }
}

逻辑说明 #

1. 未选中日期时：维持原有逻辑，锁定所有已入住的日期（即已预订区间的[)范围，包含入住日，不包含退房日）。
2. 选中起始日后：
   • 计算起始日的次日nextDay；
   • 判断该次日是否为某个已预订区间的起始日（即他人的入住日），如果是则允许选择该日期作为退房日；
   • 其余所有日期仍按照未选中时的规则锁定，确保后续已预订区间不会偏移。

完整代码 #

<script src="https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.umd.min.js"></script>
<input id="datepicker"/>
<script>
  const DateTime = easepick.DateTime;
  const bookedDates = [
      ['2023-04-19', '2023-04-21'],
      ['2023-04-28', '2023-04-29'],
      ['2023-04-29', '2023-04-30']
  ].map(d => {
      if (d instanceof Array) {
        const start = new DateTime(d[0], 'YYYY-MM-DD');
        const end = new DateTime(d[1], 'YYYY-MM-DD');

        return [start, end];
      }

      return new DateTime(d, 'YYYY-MM-DD');
  });
  const picker = new easepick.create({
    element: document.getElementById('datepicker'),
    css: [
      'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css',
      'https://easepick.com/css/demo_hotelcal.css',
    ],
    plugins: ['RangePlugin', 'LockPlugin'],
    RangePlugin: {
      tooltipNumber(num) {
        return num - 1;
      },
      locale: {
        one: 'night',
        other: 'nights',
      },
    },
    LockPlugin: {
      minDate: new Date(),
      minDays: 2,
      inseparable: true,
      filter(date, picked) {
        if (picked.length === 0) {
          return date.inArray(bookedDates, '[)');
        } else {
          const startDate = picked[0];
          const nextDay = startDate.clone().add(1, 'day');
          const isAllowedCheckout = date.isSame(nextDay, 'day') && 
            bookedDates.some(range => range[0].isSame(nextDay, 'day'));
          
          if (isAllowedCheckout) {
            return false;
          }
          
          return date.inArray(bookedDates, '[)');
        }
      },
    },
    autoApply: false
  });
</script>

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