如何阻止SweetAlert2输入框自动聚焦或延迟聚焦适配日期选择器

问题场景 #

使用SweetAlert2带输入框的弹窗，通过datepicker-container类集成Pikaday日期选择器时，出现以下问题：

• 日期选择器直接显示在最终位置
• SweetAlert弹窗执行打开动画
• 动画结束后输入框才到达最终位置，此时日期选择器才与输入框匹配

解决方案 #

方案2：弹窗动画结束后再初始化日期选择器并聚焦输入框 #

这是最直接解决位置偏移的方案，利用SweetAlert2的didOpen钩子（弹窗动画完全结束后触发）和focusInput配置项禁用默认自动聚焦：

let datepicker;

Swal.fire({
  text: "legend",
  input: "text",
  customClass: { popup: "datepicker-container" },
  focusInput: false, // 禁用弹窗打开时自动聚焦输入框
  preConfirm: (inputValue) => {
    // 你的预确认逻辑代码
  },
  willClose: () => {
    if (datepicker) datepicker.destroy();
  },
  didOpen: () => {
    // 获取弹窗内的输入框元素
    const inputElement = Swal.getInput();
    // 在输入框位置固定后初始化Pikaday
    datepicker = new Pikaday({
      field: inputElement,
      // 此处添加你的Pikaday配置项，比如格式、默认日期等
    });
    // 手动聚焦输入框（可选，若需要打开弹窗后直接唤起日期选择器）
    inputElement.focus();
  }
});

原理说明

• focusInput: false阻止SweetAlert2在弹窗动画过程中自动聚焦输入框，避免提前触发Pikaday显示。
• didOpen钩子在弹窗动画完全结束后执行，此时输入框已经处于最终位置，Pikaday初始化时能正确计算定位，不会出现位置偏移。

方案1优化：仅在用户触发输入时初始化日期选择器 #

如果希望仅在用户主动点击/聚焦输入框时才显示日期选择器，可通过绑定输入框事件延迟初始化Pikaday，避免初始闪烁：

let datepicker;

Swal.fire({
  text: "legend",
  input: "text",
  customClass: { popup: "datepicker-container" },
  focusInput: false,
  preConfirm: (inputValue) => {
    // 你的预确认逻辑代码
  },
  willClose: () => {
    if (datepicker) datepicker.destroy();
  },
  didOpen: () => {
    const inputElement = Swal.getInput();
    // 绑定聚焦事件，仅在用户触发时初始化日期选择器
    inputElement.addEventListener('focus', initDatepicker);
    // 绑定点击事件，覆盖用户点击输入框的场景
    inputElement.addEventListener('click', initDatepicker);

    function initDatepicker() {
      if (!datepicker) {
        datepicker = new Pikaday({
          field: inputElement,
          // 你的Pikaday配置项
        });
        // 移除事件监听，避免重复初始化
        inputElement.removeEventListener('focus', initDatepicker);
        inputElement.removeEventListener('click', initDatepicker);
      }
    }
  }
});

原理说明

通过给输入框绑定focus和click事件，仅在用户主动交互时才初始化Pikaday，并且初始化后移除事件监听防止重复创建，彻底避免初始渲染时的闪烁问题。

内容的提问来源于stack exchange，提问作者Jérôme C.