如何防止 Litepicker 创建多个实例

本文详解如何在动态更新日期时避免 litepicker 重复初始化，通过正确复用已有实例（而非反复新建）并使用 `setdaterange()` 等 api 实现单实例、响应式日期范围控制。

在基于 Litepicker 构建的调度系统中，一个常见痛点是：每次外部触发（如部门选择）调用 litepicker_modal() 方法时，都会新建一个 Litepicker 实例，导致 DOM 中堆积多个日历控件，界面错乱、内存泄漏、行为不可控。根本原因在于：Litepicker 的初始化逻辑被错误地置于事件响应函数内，而未做实例存在性校验或复用设计。

✅ 正确做法：单次初始化 + 动态更新

Litepicker 提供了完善的实例管理能力，关键不在于“重创建”，而在于“重配置”。解决方案分三步：

1. 仅初始化一次 Litepicker 实例

将 Litepicker 实例创建移出可重复调用的方法（如 dept_picker 或 createToday），并在 Scheduler 类中作为私有属性缓存：

Scheduler.prototype.litepicker_modal = function() {
  let _this = this;
  const pickerEl = this.$obj.find('.scheduler__litepicker')[0];

  // ✅ 关键：仅当实例不存在时才创建
  if (!this._litepicker) {
    this._litepicker = new Litepicker({
      element: pickerEl,
      inlineMode: true,
      format: 'YYYY-MM-DD',
      singleMode: false,
      numberOfMonths: 2,
      numberOfColumns: 2,
      showTooltip: true,
      scrollToDate: true,
      minDate: new Date(), // 初始最小日期
      startDate: new Date(),
      endDate: (() => {
        const d = new Date();
        d.setDate(d.getDate() + 2);
        return d;
      })(),
      tooltipText: { one: 'night', other: 'nights' },
      tooltipNumber: (days) => days - 1,
      setup: (picker) => {
        // ✅ 在 before:show 钩子中动态同步日期（非 render，性能更优）
        picker.on('before:show', () => {
          const arrivalInput = _this.$obj.find('.scheduler-arrival');
          const val = arrivalInput.val().trim();

          if (val) {
            const start = new Date(val);
            const end = new Date(start);
            end.setDate(end.getDate() + 3);
            picker.setDateRange(start, end); // ? 核心：复用实例更新范围
          } else {
            const now = new Date();
            const end = new Date(now);
            end.setDate(end.getDate() + 3);
            picker.setDateRange(now, end);
          }
        });

        picker.on('selected', (start, end) => {
          const $arrival = _this.$obj.find('.scheduler-arrival')[0];
          const $depart = _this.$obj.find('.scheduler-depart')[0];
          $arrival.setAttribute('value', start.format('YYYY-MM-DD'));
          $depart.setAttribute('value', end.format('YYYY-MM-DD'));
          _this.$obj.find('.checkin').text(start.format('MM/DD/YYYY'));
          _this.$obj.find('.checkout').text(end.format('MM/DD/YYYY'));
          _this.close_modal();
        });
      }
    });
  }
};

? 注意：before:show 比 render 更可靠——它在每次弹出前触发，确保日期始终与当前表单状态同步，且不依赖 change 事件监听器的冗余绑定。

2. 部门选择时仅更新输入值并触发变更

在 dept_picker 中，禁止再次调用 litepicker_modal()，而是直接设置日期输入框值，并触发 .change() 让 before:show 钩子自动响应：

Scheduler.prototype.dept_picker = function() {
  let _this = this;
  $('.dept').on('click', function() {
    const deptName = $(this).find('.dept-name').text();
    const openDateText = $(this).find('.open-date').text();
    const $deptValue = _this.$obj.find('.department-value');
    const $arrival = _this.$obj.find('.scheduler-arrival');

    $deptValue.text(deptName);

    if (openDateText) {
      // ✅ 设置日期并触发 change → 自动触发 before:show 更新 Litepicker
      $arrival.val(openDateText).change();
      _this.$obj.find('.checkin').text(openDateText);
      _this.$obj.find('.checkout').text('');
    } else {
      // ✅ 清空时也触发 change，确保 Litepicker 回退到默认范围
      const today = new Date();
      $arrival.val(today.toISOString().split('T')[0]).change();
      _this.$obj.find('.checkin').text('Add start date');
      _this.$obj.find('.checkout').text('');
    }

    _this.close_modal();
  });
};

3. 销毁旧实例（可选，用于极端场景）

若需彻底重置（如切换 Scheduler 实例），可在销毁前显式调用：

if (this._litepicker) {
  this._litepicker.destroy(); // ? 安全清理
  this._litepicker = null;
}

⚠️ 常见误区与注意事项

• ❌ 不要在 change 事件内新建 Litepicker：这是多实例的根源；
• ❌ 避免多次调用 new Litepicker(...)：Litepicker 不会自动覆盖，只会叠加；
• ✅ 始终优先使用 setDateRange()、setMinDate() 等方法更新状态；
• ✅ 利用 before:show / after:hide 钩子管理生命周期，而非 DOM 显示逻辑；
• ✅ 日期字符串需符合 format 配置（如 'YYYY-MM-DD'），否则 setDateRange 失效。

通过以上重构，Litepicker 将严格保持单一实例，所有外部数据变更均通过 API 同步至现有控件，既提升性能，又保障交互一致性。这不仅是 Litepicker 的最佳实践，更是前端组件化设计的核心原则：状态驱动视图，而非视图驱动状态。