jQuery - 将 datepicker 的容器设置为特定的 div
Posted
技术标签:
【中文标题】jQuery - 将 datepicker 的容器设置为特定的 div【英文标题】：jQuery - Set datepicker's container to a specific 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 事件 谢谢，我会改变的。但这并不能解决问题 我没有说它的解决方案。刚刚指出一个错误 【参考方案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'));
);
【讨论】：
以上是关于jQuery - 将 datepicker 的容器设置为特定的 div的主要内容，如果未能解决你的问题，请参考以下文章
动态插入 HTML DIV 会破坏页面上的 jQuery DatePicker
回发后jQuery将DatePicker日期文本保留到文本框中
将 JQuery UI Datepicker 与来自 Jquery UI 主题的图标一起使用