如何将datepicker包装在一个新的div中？ [英] How to wrap the datepicker in a new div?

问题描述

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

I need to put my datepicker in a new div, that will be a (shadow-)border-div.

我尝试了以下内容：

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

但它不起作用。

另外我试图包装整个选择器，但是border-div的位置和大小不一样。

Additionally I've tried to wrap the whole picker, but then the border-div has not the same position, size, etc.

推荐答案

datepicker控件绝对定位。将其包含在元素中不会包含该元素内的datepicker - 包装元素将只位于页面的底部，而datepicker将在控件旁边呈现。

The datepicker control is absolutely positioned. Wrapping it inside an element will not contain the datepicker inside that element -- the wrapping element will just sit at the bottom of the page while the datepicker will render next to the control.

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

Solution 1: You can add the class to the datepicker widget itself:

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

演示

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

demo

Solution 2: create an absolutely positioned + hidden wrapping div on DOM load and re-position + re-size the div behind the datepicker when it shows. There is a catch: you cannot check the widget's offset (the co-ordinates at which it will render) inside the beforeShow function.

这篇关于如何将datepicker包装在一个新的div中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！