Question

我的表单大小有限，溢出样式设置为滚动。此表单包含许多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相对于浏览器窗口而不是触发器输入字段固定。当滚动表单时，任何人都可以帮助我保持DatePicker控件打开并在相对于其触发器输入字段的相同位置吗？

由于

编辑：阐明标题和情况说明。

编辑：修复摘要文本

Answer 1

使用的完整解决方案是：

var dtPckr = $('#datepicker')

$(".demo").scroll(function() {
  dtPckr.datepicker('hide');
});

$(window).resize(function() {
  dtPckr.datepicker('hide');
});

这扩展了Nick C发布的解决方案，添加了窗口大小调整处理程序以隐藏日期选择器。这应涵盖内容相对于显示的日期选择器移动的所有情况。

Answer 2

datepicker附加到容器，在所有情况下都是1.7.2小部件的body元素。不幸的是，这意味着不，它在滚动div中不是一个可修复的问题。 This came up on the jQuery groups mailing list a while back.

另一种方法是在滚动div时关闭日期选择器，这样至少没有可见的工件：

$(".demo").scroll(function() {
  $('#datepicker').datepicker('hide');
});

在可滚动的div中，jQuery DatePicker不随HTML内容移动

2 个答案: