javascript 如何将日期选择器包装在新的 div 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10812921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wrap the datepicker in a new div?
提问by Keith L.
I need to put my datepicker in a new div, that will be a (shadow-)border-div.
我需要将我的日期选择器放在一个新的 div 中，这将是一个 (shadow-)border-div。
I've tried the following:
我尝试了以下方法：
beforeShow: function (input) {
$(input).datepicker("widget")
.find(".ui-datepicker-header, ui-datepicker-calendar")
.wrapAll("<div class='datepickerBorder'/>");
}
But it does not work.
但它不起作用。
Additionally I've tried to wrap the whole picker, but then the border-div has not the same position, size, etc.
此外，我试图包装整个选择器，但边框 div 的位置、大小等都不相同。
回答by Salman A
The datepicker control is absolutely positioned. Wrapping it inside an element will not containthe 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.
日期选择器控件是绝对定位的。将它包装在一个元素内不会在该元素内包含日期选择器——包装元素将位于页面底部，而日期选择器将在控件旁边呈现。
Solution 1: You can add the class to the datepicker widget itself:
解决方案 1：您可以将类添加到 datepicker 小部件本身：
$("#datepicker2").datepicker({
beforeShow: function() {
$(this).datepicker("widget").addClass("datepickerBorder");
},
onClose: function() {
$(this).datepicker("widget").removeClass("datepickerBorder");
}
});
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 beforeShowfunction.
解决方案 2：在 DOM 加载时创建一个绝对定位 + 隐藏包装 div，并在日期选择器显示时重新定位 + 重新调整其大小。有一个问题：您无法在beforeShow函数内检查小部件的偏移量（它将呈现的坐标）。
回答by thecodeparadox
$('#datepicker').wrap('<div class="datepickerBorder"/>');
Here #datepickeris the idof datepicker input field, you may have something else.
这#datepicker是id日期选择器的输入字段，您可能还有其他内容。
Check jQuery .wrap().
检查 jQuery .wrap()。
You don't need to do this within beforeShow(). Do it within DOM ready function.
您不需要在beforeShow(). 在 DOM 就绪函数中执行此操作。
To wrap each inner element of datepickeryou should try
要包装datepicker你应该尝试的每个内部元素
$('div#ui-datepicker-div > *').wrap('<div class='datepickerBorder'/>');
