jQuery UI datepicker:如何在一个新的div中包装datepicker？

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

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

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

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

演示

解决方案2:在DOM加载时创建一个绝对定位的+隐藏包装div,并在显示时重新定位并重新调整datepicker后面的div.有一个问题:您无法在beforeShow函数内部检查窗口小部件的偏移量(它将呈现的坐标).