Question

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

我像这样加载了datepicker：

的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" />

如何将datepicker的容器设置为特定的div？

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

Answer 1

解决方案是将dataPicker的div移到隐藏的绝对定位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();
} });

Answer 2

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

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

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

2 个答案: