jQuery - 将 datepicker 的容器设置为特定的 div答案

【问题标题】：jQuery - Set datepicker's container to a specific divjQuery - 将 datepicker 的容器设置为特定的 div
【发布时间】：2014-07-06 11:33:09
【问题描述】：

我在 div 上使用 jQuery UI 日期选择器。 div 通过移动鼠标隐藏和显示。由于日期选择器存在于<body> 标记的末尾，而不是在我的 div 中，所以当我将鼠标移动到日期选择器时，div 会消失。

我这样加载日期选择器：

Javascript

$("#dt1").datepicker({
    dateFormat: "dd/mm/yy",
    showOn: "button",
    buttomText: "Arrival date",
    buttonImage: "<button location>",
    buttonImageOnly: true,
});

HTML

<input type="text" id="dt1" size="10" name="dt1" value="Arrival Date" />

如何将日期选择器的容器设置为特定的 div？

编辑：在 JSFiddle 上查看：http://jsfiddle.net/G4NzC/

【问题讨论】：

建议你在 jsfiddle.net 中创建一个 demo 以便其他人更好地理解问题。
已添加。 jsfiddle.net/G4NzC
您的代码中不需要 onclick 事件
谢谢，我会改变的。但这并不能解决问题
我没有说它的解决方案。刚刚指出一个错误

标签： javascript jquery html datepicker

【解决方案1】：

解决方法是将dataPicker的div移到hidden-absolute-positioned-div里面。

类似的东西（这只是@andrew 的想法，但你需要改进css 样式和其他东西）：

请注意，#dt1 是日期的输入文本，#ui-datepicker-div 是日期选择器的 div，#bookingBox 是隐藏绝对定位的 div。

$("#dt1").datepicker({ 
dateFormat: "dd/mm/yy", 
showOn: "button", 
buttomText: "Arrival date",
buttonImage: "http://www.inbar.co.il/designFiles/Inbar_Ico_Calander.png", 
buttonImageOnly: true,
beforeShow:function(textbox, instance){
    $('#ui-datepicker-div').css({
        position: 'absolute',
        top:-20,
        left:5                   
    });
    $('#bookingBox').append($('#ui-datepicker-div'));
    $('#ui-datepicker-div').hide();
} });

【讨论】：

【解决方案2】：

我发现的最简单的解决方案是

$("#myDatePicker").datepicker({
   beforeShow:function(textbox, instance){
     $('.DivToAppendPicker').append($('#ui-datepicker-div'));
   }
});

【讨论】：