一千萬個為什麽

搜索

在可滾動的div中,jQuery DatePicker不隨HTML內容移動

我有一個有限制的大小和溢出風格設置為滾動的窗體。此表單包含許多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">
        
Date: <input type="text" id="datepicker">

</div>



































</div> </body> </html>

目前,datepicker相對於瀏覽器窗口而不是觸發器輸入字段固定。當滾動表單時,任何人都可以幫我保持DatePicker控件打開並在相對於其觸發器輸入字段的相同位置嗎?

謝謝

編輯:闡明標題和情況說明。

編輯:修正摘要文本

最佳答案

使用的完整解決方案是:

var dtPckr = $('#datepicker')

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

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

這擴展了Nick C發布的解決方案,添加了窗口大小調整處理程序來隱藏datepicker。這應該涵蓋內容相對於顯示的日期選擇器移動的所有情況。

轉載註明原文: 在可滾動的div中,jQuery DatePicker不隨HTML內容移動