jQuery UI datepicker：如何将datepicker包装在一个新的div中？

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

我尝试过以下方法：

beforeShow: function (input) { $(input).datepicker("widget") .find(".ui-datepicker-header, ui-datepicker-calendar") .wrapAll("
"); } 

但它不起作用。

另外我试图包装整个选择器，但是后边界不是相同的位置，大小等。

有人可以帮帮忙吗？

Answer 1

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

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

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

演示

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

Answer 2

 $('#datepicker').wrap('
'); 

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

检查jQuery .wrap（） 。

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

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

 $('div#ui-datepicker-div > *').wrap('
');