滚动时如何保持jquery ui datepicker（坚持输入控件）？

Question

在阅读了大量有关该主题的内容后，我仍然对如何解决问题一无所知。为了澄清问题，我希望日历与关联的输入控件一起滚动，而不是固定在任何屏幕位置。 这是没有滚动的图像：（这也是我想在滚动上保留的）

这是滚动时的图像：（这不是我想要的）

任何提示将不胜感激。 更新： 这是一个密切描述问题的link，我希望日历在滚动时粘在控件上。

Answer 1

我不确定你的是否是可滚动的 div，但这里发生的问题是 jQuery UI 日期选择器在可滚动的 div 内不会随 HTML 内容移动。

这是一个演示 http://jsfiddle.net/joycse06/m6A5q/embedded/result/ 演示问题的小提琴。单击输入并尝试滚动该 div。

这是因为 jQuery UI 将日历 UI 创建为位置 absolute relative 到 document 或 window 而不是容器可滚动 div。因此，当可滚动 div 滚动时，主窗口的滚动上下文不会更改，因此 datepicker 日历不会跟随该 div 中的其他 html 元素。

因此，解决方案可以是在滚动该 div 时隐藏日历，这很有意义，如果输入不可见，您可以隐藏 datepicker 日历。所以更新后的代码将是

var datePicker = $('#datepicker').datepicker();

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

$(window).resize(function() {
  datePicker.datepicker('hide');
  $('#datepicker').blur();
});

当容器 div 或窗口滚动时，它将隐藏日期选择器。这是一个工作小提琴http://jsfiddle.net/joycse06/m6A5q/2/

我正在使用$('#datepicker').blur();，因为当用户滚动.demo 时，日历会隐藏，但input 仍然是焦点，所以当他向后滚动时，他可能会感到困惑。所以当我模糊它时，他将不得不再次点击input，然后日期选择器就会出现。