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

在阅读了很多关于这个主题的内容后，我仍然处于如何处理解决问题的黑暗中。 为了澄清问题，我希望日历与输入控件相关联，而不是在任何屏幕位置保持固定。 这是没有滚动的图像:(这也是我想在滚动上保留的内容）

这是滚动时的图像:(这不是我想要的）

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

Answer 1

我不确定你的那个是否是一个可滚动的div，但是这里出现的问题是jQuery UI日期选择器在可滚动div内部时不随HTML内容移动。

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

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

因此，解决方案可以是在滚动div时隐藏日历，这是有意义的，如果输入不可见，则可以隐藏日期选择器日历。 所以更新的代码将是

 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并显示日期选择器。