我需要将我的日期选择器放在一个新的 div 中,它将是一个 (shadow-)border-div。
我试过以下方法:
beforeShow: function (input) {
$(input).datepicker("widget")
.find(".ui-datepicker-header, ui-datepicker-calendar")
.wrapAll("<div class='datepickerBorder'/>");
}
但它不起作用。
此外,我试图包裹整个选择器,但是 border-div 的位置、大小等都不相同。
最佳答案
日期选择器控件是绝对定位的。将其包装在元素内不会包含该元素内的日期选择器——包装元素将仅位于页面底部,而日期选择器将呈现在控件旁边。
解决方案 1:您可以将类添加到日期选择器小部件本身:
$("#datepicker2").datepicker({
beforeShow: function() {
$(this).datepicker("widget").addClass("datepickerBorder");
},
onClose: function() {
$(this).datepicker("widget").removeClass("datepickerBorder");
}
});
demo
解决方案 2:在 DOM 加载时创建一个绝对定位 + 隐藏包装的 div,并在日期选择器显示时重新定位 + 调整 div 的大小。有一个问题:您无法在 beforeShow
函数中检查小部件的偏移量(它将呈现的坐标)。
关于javascript - 如何将日期选择器包装在新的 div 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10812921/