如何保持jquery ui datepicker到位（坚持输入控件）滚动？ [英] How to keep jquery ui datepicker in place (stick to the input control) while scrolling?

问题描述

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

After reading a lot of on the subject I'm still in the dark about how to approach resolving the problem. To clarify problem, I want calendar to scroll altogether with input control associated and not to stay fixed at whatever screen position. Here is image with no scroll: (that is what I want to preserve on scroll as well)

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

and here is image while scrolling : (that is not what I want)

>

任何提示将非常感谢。
更新：
这是一个链接密切描绘的问题，我想日历在滚动时坚持控制。

Any tip would be greatly appreciated. UPDATE: Here is a link that closely portray the problem, I would like calendar to stick to the control while scrolling.

推荐答案

我不知道你的一个是可滚动的div，但发生这里的问题是jQuery UI日期选择器不

I am not sure if your's one is a scrollable div, but the problem occurring here is jQuery UI date picker doesn't move with HTML content when inside a scrollable div.

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

Here is a fiddle which demo http://jsfiddle.net/joycse06/m6A5q/embedded/result/ demonstrating the problem. Click on input and try scrolling that div.

这是因为jQuery UI创建日历UI为位置 absolute code>相对到文档或窗口不是容器可滚动div。所以当可滚动div滚动主窗口的滚动上下文没有改变，因此日期picker日历不跟随该div中的其他html元素。

It's happening because jQuery UI create the calendar UI as position absolute relative to document or window not the container scrollable div. So when the scrollable div is scrolled main window's scrolling context isn't changed and hence the datepicker calendar doesn't follow other html element in that div.

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

So the solution can be to hide the calendar when that div is scrolled and it makes sense, if the input is not visible you can hide the datepicker calendar. So the updated code will be

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/

It will hide the date picker when container div or window is scrolled. here is a working fiddle http://jsfiddle.net/joycse06/m6A5q/2/

我使用 $（'＃datepicker'）。blur（）; ，因为当用户滚动 .demo 日历隐藏，但输入仍然关注，因此当他滚动回来时，他可能会感到困惑。因此，为了我模糊，他必须再次点击输入，日期选择器将显示。

I am using the $('#datepicker').blur(); because when user scrolls .demo calendar hides but the input is still focused, so when he scrolls back he can become confused. So as I blur it he will have to click on the input again and date picker will show up.

这篇关于如何保持jquery ui datepicker到位（坚持输入控件）滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！