如何调整easepick插件LockPlugin过滤规则，允许结束日期为已预订入住日

我正在使用easepick JavaScript插件生成日期范围选择器，代码如下：

<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-02',
      ['2023-04-06', '2023-04-11'],
      '2023-04-18',
      '2023-04-19',
      '2023-04-20',
      '2023-04-25',
      '2023-04-28',
  ].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 === 1) {
          const incl = date.isBefore(picked[0]) ? '[)' : '(]';
          return !picked[0].isSame(date, 'day') && date.inArray(bookedDates, incl);
        }

        return date.inArray(bookedDates, '[)');
      },
    },
    autoApply: false,
    onApply(dates) {
     console.log(dates);
    }
  });
</script>

目前用户无法选择包含在bookedDates数组中的结束日期，但实际应允许结束日期与其他用户的入住日期相同，请问如何修改LockPlugin中的filter函数来实现这一需求？

问题出在原filter函数的区间判断逻辑：当选择结束日期时，使用了(]左开右闭区间，会将已预订区间的起始日（即其他用户的入住日）误判为锁定日期。我们需要针对结束日期单独调整判断规则，允许结束日期落在已预订区间的起始点或单个预订日当天。

修改后的LockPlugin配置如下，核心是重写filter函数：

LockPlugin: {
  minDate: new Date(),
  minDays: 2,
  inseparable: true,
  filter(date, picked) {
    if (picked.length === 1) {
      const startDate = picked[0];
      // 区分选择起始日期和结束日期的逻辑
      if (date.isAfter(startDate)) {
        // 选择结束日期：仅锁定完全落在已预订区间内部的日期
        return bookedDates.some(item => {
          if (Array.isArray(item)) {
            const [bookedStart, bookedEnd] = item;
            // 锁定条件：日期大于已预订起始日且小于已预订结束日
            return date.isAfter(bookedStart) && date.isBefore(bookedEnd);
          } else {
            // 单个预订日：由于起始阶段已锁定该日期，结束日期选此日不会重叠，无需锁定
            return false;
          }
        });
      } else {
        // 选择起始日期：锁定所有已预订日期
        return date.inArray(bookedDates, '[)');
      }
    }
    // 未选择任何日期时，锁定所有已预订日期
    return date.inArray(bookedDates, '[)');
  },
},

关键修改说明 #

1. 拆分逻辑：明确区分用户选择起始日期和结束日期的不同场景
2. 结束日期规则：仅锁定那些完全处于已预订区间内部的日期（即大于已预订起始日且小于已预订结束日），允许结束日期等于已预订区间的起始日或结束日
3. 单个预订日处理：由于在选择起始日期阶段已经锁定了单个预订日，用户无法将其设为起始日期，因此选择该日期作为结束日期时不会产生预订冲突，无需锁定

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