jQuery - 将datepicker的容器设置为特定的div [英] jQuery - Set datepicker's container to a specific div
问题描述
< body>
标签的末尾,不在我的div内,当我将鼠标移动到datepicker时,div消失。 我加载了这样的datepicker:
Javascript
$(#dt1)。datepicker({
dateFormat:dd / mm / yy,
showOn:button
buttomText:到达日期,
buttonImage:< button location>,
buttonImageOnly:true,
});
HTML
< input type =textid =dt1size =10name =dt1value =到达日期/>
如何将datepicker的容器设置为特定的div?
编辑:请参阅JSFiddle: http:// jsfiddle。 net / G4NzC /
解决方案是将dataPicker的div移动到隐藏的绝对位置 -
这样的东西(这只是@andrew的想法,但你需要改进CSS样式和其他的东西):
请注意,#dt1
是日期的输入文本,#ui-datepicker-div
是datepicker的div, #bookingBox
是隐藏的绝对位置的div。
$(#dt1)。datepicker({
dateFormat:dd / mm / yy,
showOn:button,
buttomText:到达日期
buttonImage:http://www.inbar.co.il/designFiles/Inbar_Ico_Calander.png,
buttonImageOnly:true,
beforeShow:function(textbox,i nstance){
$('#ui-datepicker-div')。css({
position:'absolute',
top:-20,
left:5
});
$('#bookingBox')。append($('#ui-datepicker-div'));
$('#ui-datepicker-div')。hide();
}});
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.
I loaded the datepicker like this:
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" />
How can I set the container of the datepicker to a specific div?
Edit: See it on JSFiddle: http://jsfiddle.net/G4NzC/
The solution is to move the dataPicker's div to inside the hidden-absolute-positioned-div.
something like this (this is just the idea by @andrew but you need to improve css styling and other things):
Note that #dt1
is the input text for the date, #ui-datepicker-div
is the datepicker's div and #bookingBox
is the hidden-absolute-positioned-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();
} });
这篇关于jQuery - 将datepicker的容器设置为特定的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!