如何在Easepick日期选择器中配置周六起7天预订及半日可用功能

核心问题分析 #

添加MM/DD/YYYY HH:mm:SS时间格式后无法选择周六，大概率是日期限制逻辑未适配时间组件的日期对象，或者RestrictionPlugin的规则与TimePlugin的时间范围冲突导致的。以下是完整的兼容配置：

1. 完整配置代码 #

const picker = new easepick.create({
  element: document.getElementById('datepicker'),
  css: [
    'https://cdn.jsdelivr.net/npm/@easepick/bundle@1.2.1/dist/index.css'
  ],
  plugins: ['RangePlugin', 'RestrictionPlugin', 'TimePlugin', 'CalendarPlugin'],
  RangePlugin: {
    tooltipNumber(num) {
      return num === 7 ? '7晚（周六至周六）' : `${num}晚`;
    },
    minDate: 0, // 禁止选择过去日期
    maxDate: new Date(new Date().setMonth(new Date().getMonth() + 3)), // 限制3个月内预订
  },
  RestrictionPlugin: {
    // 仅允许周六作为起始日，且必须选择7天跨度（下周六）
    beforeShowDay(date) {
      const day = date.getDay();
      // 处理时间组件带来的时间偏移：确保只判断日期部分，忽略时间
      const currentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
      const today = new Date(new Date().setHours(0, 0, 0, 0));

      // 禁止过去日期
      if (currentDate < today) {
        return { disabled: true };
      }

      // 允许周六，以及当前选中起始日的下周六（即结束日）
      if (picker.selectedDates.length === 0) {
        return day === 6 ? {} : { disabled: true };
      } else {
        const startDate = picker.selectedDates[0];
        const endDate = new Date(startDate);
        endDate.setDate(endDate.getDate() + 7);
        // 结束日必须是下周六，且只能选这一天
        return currentDate.getTime() === endDate.getTime() ? {} : { disabled: true };
      }
    },
  },
  TimePlugin: {
    format: 'MM/DD/YYYY HH:mm:SS',
    // 配置入住/退房的时间范围
    hours: {
      checkin: {
        from: 16, // 入住时间从16:00开始（4pm）
        to: 23
      },
      checkout: {
        from: 0,
        to: 10 // 退房时间到10:00结束（10am）
      }
    },
  },
  CalendarPlugin: {
    // 自定义半日时段的半三角标识
    renderDay(date) {
      const day = date.getDay();
      const currentDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
      const el = document.createElement('div');
      el.className = 'easepick-day';

      // 入住日（周六）显示下半三角（表示4pm后可入住）
      if (day === 6 && currentDate >= new Date(new Date().setHours(0,0,0,0))) {
        el.innerHTML = `
          <span>${date.getDate()}</span>
          <span class="half-triangle bottom"></span>
        `;
      }
      // 退房日（下周六）显示上半三角（表示10am前可退房）
      else if (picker.selectedDates.length > 0) {
        const endDate = new Date(picker.selectedDates[0]);
        endDate.setDate(endDate.getDate() +7);
        if (currentDate.getTime() === endDate.getTime()) {
          el.innerHTML = `
            <span>${date.getDate()}</span>
            <span class="half-triangle top"></span>
          `;
        } else {
          el.textContent = date.getDate();
        }
      } else {
        el.textContent = date.getDate();
      }

      return el;
    }
  },
  // 预选中目标周六至周六日期（示例：当前周六到下周六）
  selectedDates: [
    new Date(new Date().setDate(new Date().getDate() + (6 - new Date().getDay()))),
    new Date(new Date().setDate(new Date().getDate() + (6 - new Date().getDay()) +7))
  ],
});

2. 自定义半三角样式 #

需要在CSS中添加半三角的样式：

.half-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.half-triangle.bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 8px 0 8px;
  border-color: #2563eb transparent transparent transparent;
}
.half-triangle.top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #ef4444 transparent;
}

3. 关键修复点 #

• 日期判断忽略时间部分：在beforeShowDay中，将日期对象转换为仅保留年月日的格式，避免时间组件带来的小时/分钟偏移导致日期判断错误。
• 起始日与结束日的联动限制：当选中起始周六后，仅允许选择7天后的周六作为结束日，避免其他日期被误选。
• 时间范围与日期规则兼容：TimePlugin的时间范围仅作用于入住/退房的时段，不干扰日期的可选性判断。

内容的提问来源于stack exchange，提问作者Jason Crossno US TriAthlete