如何将周选datepicker嵌入Swiper并解决同步异常问题

核心问题分析 #

1. 日期同步变化：多个 Slide 中的 Datepicker 共用了同一数据源或实例，导致选择一个日期后所有 Slide 的日期同步更新。
2. 周选择事件失效：Swiper 非活跃 Slide 默认会被隐藏（display: none），初始化时仅为可见 Slide 创建的 Datepicker 实例，在切换后非活跃 Slide 的事件绑定会失效；同时未在 Slide 切换时重新初始化当前活跃 Slide 的 Datepicker。

分步解决方案 #

1. 为每个 Slide 创建独立的 Datepicker 实例 #

给每个 Slide 内的日期输入框添加唯一标识（比如 data-slide-index），初始化时为每个输入框创建独立的 Datepicker 实例，并维护各自的选中日期数据。

示例代码

<!-- Swiper 结构 -->
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <input type="text" class="week-picker" data-slide-index="0" placeholder="选择周">
    </div>
    <div class="swiper-slide">
      <input type="text" class="week-picker" data-slide-index="1" placeholder="选择周">
    </div>
    <div class="swiper-slide">
      <input type="text" class="week-picker" data-slide-index="2" placeholder="选择周">
    </div>
  </div>
</div>

// 存储每个 Slide 的 Datepicker 实例和选中日期
const pickerInstances = {};
const selectedDates = {};

// 初始化单个 Slide 的 Datepicker
function initDatepicker(slideIndex) {
  const inputEl = document.querySelector(`.week-picker[data-slide-index="${slideIndex}"]`);
  if (!inputEl || pickerInstances[slideIndex]) return;

  // 创建独立实例
  pickerInstances[slideIndex] = new AirDatepicker(inputEl, {
    weeks: true, // 开启周选择
    selectedDates: selectedDates[slideIndex] || [],
    onSelect({ date }) {
      // 仅更新当前 Slide 的选中日期
      selectedDates[slideIndex] = date;
      console.log(`Slide ${slideIndex} 选中周:`, date);
    },
    // 自定义周数渲染（可选）
    onRenderCell({ date, cellType }) {
      if (cellType === 'day') {
        const weekNum = getWeekNumber(date); // 自行实现周数计算方法
        return { html: `<span>${date.getDate()}</span><small>周${weekNum}</small>` };
      }
    }
  });
}

// 初始化 Swiper
const swiper = new Swiper('.swiper', {
  watchSlidesVisibility: true, // 监听 Slide 可见状态
  watchSlidesProgress: true,   // 监听 Slide 进度
  on: {
    init() {
      // 初始化初始活跃 Slide 的 Datepicker
      initDatepicker(this.activeIndex);
    },
    slideChange() {
      // 销毁前一个 Slide 的实例（避免内存泄漏）
      if (pickerInstances[this.previousIndex]) {
        pickerInstances[this.previousIndex].destroy();
        delete pickerInstances[this.previousIndex];
      }
      // 初始化当前活跃 Slide 的 Datepicker
      initDatepicker(this.activeIndex);
    }
  }
});

// 辅助：计算日期所属周数
function getWeekNumber(date) {
  const startDate = new Date(date.getFullYear(), 0, 1);
  const days = Math.floor((date - startDate) / (24 * 60 * 60 * 1000));
  return Math.ceil((days + startDate.getDay() + 1) / 7);
}

2. 关键注意事项 #

• 避免全局数据污染：每个 Slide 的选中日期必须用独立变量存储（如示例中的 selectedDates[slideIndex]），禁止共用同一全局变量。
• 销毁旧实例：切换 Slide 时销毁前一个 Slide 的 Datepicker 实例，防止内存泄漏和事件冲突。
• Swiper 配置优化：开启 watchSlidesVisibility 和 watchSlidesProgress，确保 Slide 切换时 DOM 元素状态正确，避免 Datepicker 渲染异常。

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