我在div上使用jQuery UI datepicker. div通过移动鼠标来隐藏和显示.因为日期选择器存在于< body>的末尾标签,不在我的div内,当我将鼠标移动到datepicker时,div消失了.
我像这样加载了datepicker:
$("#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/
解决方法
解决方案是将dataPicker的div移动到hidden-absolute-located-div中.
像这样的东西(这只是@andrew的想法,但你需要改进CSS样式和其他东西):
请注意,#dt1是日期的输入文本,#ui-datepicker-div是datepicker的div,#bookingBox是hidden-absolute-located-div.
$("#dt1").datepicker({ dateFormat: "dd/mm/yy",buttonImage: "http://www.inbar.co.il/designFiles/Inbar_Ico_Calander.png",beforeShow:function(textBox,instance){ $('#ui-datepicker-div').css({ position: 'absolute',top:-20,left:5 }); $('#bookingBox').append($('#ui-datepicker-div')); $('#ui-datepicker-div').hide(); } });