jQueryUI datepicker追加到popup div后显示位置错误如何解决？

问题根因 #

jQueryUI 计算 #ui-datepicker-div 的 top/left 坐标时默认基于body视口，将其挂载到设置了position: relative的popup容器后，原有坐标会叠加popup自身的定位偏移，导致位置错位。且beforeShow同步阶段手动设置的位置会被框架后续的默认计算逻辑覆盖。

可行解决方案 #

方案1：异步修正位置（兼容性最好，适配所有场景） #

利用setTimeout将位置修正逻辑放到下一个事件循环，等框架默认的位置赋值完成后再覆盖，不会被重置：

$("input").datepicker({
  beforeShow: function(input, inst) {
    const $popup = $("#myPopup");
    $("#ui-datepicker-div").appendTo($popup);
    // 0延迟等待框架默认位置设置完成
    setTimeout(() => {
      const $input = $(input);
      // 获取输入框相对于popup容器的坐标
      const inputRelativePos = $input.position();
      $("#ui-datepicker-div").css({
        // 日期选择器默认显示在输入框下方
        top: inputRelativePos.top + $input.outerHeight(),
        left: inputRelativePos.left
      });
    }, 0);
  }
});

需要提前给popup容器设置定位属性：

#myPopup {
  position: absolute;
  top:50px;
  left:100px;
  /* 必须加，作为datepicker的定位父级 */
  position: relative;
}

方案2：通过beforeShow返回值覆盖默认坐标（无异步逻辑） #

beforeShow回调支持返回包含top/left属性的对象，框架会直接用返回的坐标赋值，不会再走默认计算逻辑：

$("input").datepicker({
  beforeShow: function(input, inst) {
    const $popup = $("#myPopup");
    $("#ui-datepicker-div").appendTo($popup);
    // 计算popup相对于body的偏移量
    const popupOffset = $popup.offset();
    // 框架默认计算的是相对于body的坐标，减去popup偏移得到相对popup的正确坐标
    return {
      top: inst.dpDiv.offset().top - popupOffset.top,
      left: inst.dpDiv.offset().left - popupOffset.left
    }
  }
});

额外优化建议 #

• 可加全局CSS避免datepicker定位类型被异常覆盖：

#ui-datepicker-div {
  position: absolute !important;
}

• 如果popup容器内部有滚动条，使用position()方法计算相对坐标即可自动适配滚动偏移。

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