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

我需要将datepicker放在一个新的div中,这将是一个(shadow-)border-div.

我尝试了以下方法：

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

但这行不通.

另外,我尝试包装整个选择器,但是border-div的位置,大小等不相同.

解决方法:

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

解决方案1：您可以将类添加到datepicker小部件本身：

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

demo

解决方案2：在DOM加载时创建一个绝对定位的隐藏包装div,并在显示日期选择器后重新定位div的大小.有一个陷阱：您不能在beforeShow函数中检查窗口小部件的偏移量(它将渲染的坐标).