javascript - 如何将日期选择器包装在新的 div 中？

Question

我需要将我的日期选择器放在一个新的 div 中，它将是一个 (shadow-)border-div。

我试过以下方法:

beforeShow: function (input) {
  $(input).datepicker("widget")
   .find(".ui-datepicker-header, ui-datepicker-calendar")
   .wrapAll("<div class='datepickerBorder'/>");
}

但它不起作用。

此外，我试图包裹整个选择器，但是 border-div 的位置、大小等都不相同。

Answer 1

日期选择器控件是绝对定位的。将其包装在元素内不会包含该元素内的日期选择器——包装元素将仅位于页面底部，而日期选择器将呈现在控件旁边。

解决方案 1:您可以将类添加到日期选择器小部件本身:

$("#datepicker2").datepicker({
    beforeShow: function() {
        $(this).datepicker("widget").addClass("datepickerBorder");
    },
    onClose: function() {
        $(this).datepicker("widget").removeClass("datepickerBorder");
    }
});

demo

解决方案 2:在 DOM 加载时创建一个绝对定位 + 隐藏包装的 div，并在日期选择器显示时重新定位 + 调整 div 的大小。有一个问题:您无法在 beforeShow 函数中检查小部件的偏移量(它将呈现的坐标)。