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

Question

>我需要将我的日期选择器放在一个新的div中，这将是一个（阴影）边框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");
    }
});

演示

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

Answer 2

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

这里#datepicker是日期选择器输入字段的id，您可能还有其他内容。

检查 jQuery .wrap（）。

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

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

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