【问题标题】：How to wrap the datepicker in a new div?如何将日期选择器包装在新的 div 中？
【发布时间】：2012-05-30 08:48:52
【问题描述】：

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

我尝试了以下方法：

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

但它不起作用。

另外，我尝试包裹整个选择器，但是边框 div 的位置、大小等不一样。

【问题讨论】：

您是指日期选择器（日历）元素本身吗？
我的意思是日期选择器本身。但是当我包装选择器本身时，border-div 的位置、大小等与日期选择器不同。因此，我想到了包装子元素。

标签： javascript jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

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

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

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

demo

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

【讨论】：

solution1 正在工作，但并没有真正解决我的问题。因为我需要两个边界（一个正常，一个用于“阴影”），一个总是被另一个覆盖。解决方案2 适合我的需要，但偏移量的问题使其无法使用。有机会拿到offset吗？
不知道，可能你可以在 beforeShow 中使用 setInteval；在触发 beforeShow 100 毫秒后检查 datepicker 小部件的位置。
beforeShow里面有setTimeout的东西就是线索！
解决方案 1 对我来说似乎毫无意义。 jQuery UI 是完全可主题化的，如果你想要，例如一个肥大的红色边框然后只是.ui-datepicker { border:solid 10px red; } jsfiddle.net/VxNQW

【解决方案2】：

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

这里#datepicker是datepicker输入字段的id，你可能还有别的东西。

检查 jQuery .wrap().

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

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

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

【讨论】：

包装工作正常。但随后border-div 的位置、大小等与日期选择器不同。因此，我想到了包装子元素。
谢谢。但正如你在这里看到的：suckmypic.net/5sUoo9sm.png 如果我尝试包装孩子，则没有包装元素:(