我的表单大小受到限制,并且溢出样式设置为滚动。该表单包含许多 DatePickers。如果我打开其中一个 DatePicker,然后滚动面板(使用滚轮将焦点保持在 DatePicker 上,使其保持打开状态),DatePicker 不会随其附加的表单字段一起移动。请参阅下面我的完整工作示例:
<html>
<head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
</head>
<body>
<div style="width: 200px; height: 200px; overflow: scroll">
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
changeMonth: true,
changeYear: true,
buttonImageOnly: true,
dateFormat: 'dd M yy',
buttonText: 'Click'
});
});
</script>
<div class="demo">
<p>Date:
<input type="text" id="datepicker">
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
目前,日期选择器相对于浏览器窗口而不是触发器输入字段固定在适当的位置。当表单滚动时,任何人都可以帮助我保持 DatePicker 控件打开并位于相对于其触发器输入字段的同一位置吗?
Thanks
编辑:澄清了标题和情况说明。
编辑:修复了摘要文本
使用的完整解决方案是:
var dtPckr = $('#datepicker')
$(".demo").scroll(function() {
dtPckr.datepicker('hide');
});
$(window).resize(function() {
dtPckr.datepicker('hide');
});
这通过添加窗口调整大小处理程序来隐藏日期选择器来扩展 Nick C 发布的解决方案。这应该涵盖内容相对于显示的日期选择器移动的所有情况。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)