javascript jQuery - 将日期选择器的容器设置为特定的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23721957/
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
jQuery - Set datepicker's container to a specific div
提问by smartDonkey
I'm using jQuery UI datepicker on an div. the div hides and shows by moving mouse. as the datepicker are exist at the end of the <body>tag, not inside my div, the div disappears when I move the mouse to the datepicker.
我在 div 上使用 jQuery UI datepicker。div 通过移动鼠标隐藏和显示。由于日期选择器存在于<body>标签的末尾，而不是在我的 div 内，当我将鼠标移动到日期选择器时，div 消失了。
I loaded the datepicker like this:
我像这样加载了日期选择器：
Javascript
Javascript
$("#dt1").datepicker({
dateFormat: "dd/mm/yy",
showOn: "button",
buttomText: "Arrival date",
buttonImage: "<button location>",
buttonImageOnly: true,
});
HTML
HTML
<input type="text" id="dt1" size="10" name="dt1" value="Arrival Date" />
How can I set the container of the datepicker to a specific div?
如何将日期选择器的容器设置为特定的 div？
Edit:See it on JSFiddle: http://jsfiddle.net/G4NzC/
编辑：在 JSFiddle 上查看：http: //jsfiddle.net/G4NzC/
回答by smartDonkey
The solution is to move the dataPicker's div to inside the hidden-absolute-positioned-div.
解决方案是将 dataPicker 的 div 移动到 hidden-absolute-positioned-div 内。
something like this (this is just the idea by @andrew but you need to improve css styling and other things):
像这样的东西（这只是@andrew 的想法，但您需要改进 css 样式和其他东西）：
Note that #dt1is the input text for the date, #ui-datepicker-divis the datepicker's div and #bookingBoxis the hidden-absolute-positioned-div.
请注意，这#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();
} });
回答by Moiz
Simplest solution which I've found is
我发现的最简单的解决方案是
$("#myDatePicker").datepicker({
beforeShow:function(textbox, instance){
$('.DivToAppendPicker').append($('#ui-datepicker-div'));
}
});
