demo

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");
    }
});

demo

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

Answer 2

$('#datepicker').wrap('<div class="datepickerBorder"/>');

此处#datepicker是datepicker输入字段的id，您可能还有其他内容。

检查jQuery .wrap() 。

您无需在beforeShow()内执行此操作。在DOM就绪函数中执行此操作。

要包装datepicker的每个内部元素，您应该尝试

$('div#ui-datepicker-div > *').wrap('<div class='datepickerBorder'/>');

如何将datepicker包装在一个新的div中？

2 个答案:

demo