3

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

我尝试了以下方法：

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

但它不起作用。

此外，我尝试包装整个选择器，但边框 div 的位置、大小等不同。

4

2 回答 2

5

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

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

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

演示

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

于 2012-05-30T09:19:48.583 回答
3 
$('#datepicker').wrap('<div class="datepickerBorder"/>');

这#datepicker是iddatepicker 输入字段，您可能还有其他内容。

检查 jQuery .wrap()。

您不需要在beforeShow(). 在 DOM 就绪函数中执行此操作。

datepicker包装你应该尝试的每个内部元素

$('div#ui-datepicker-div > *').wrap('<div class='datepickerBorder'/>');
于 2012-05-30T08:49:31.467 回答