I am using the standard jQuery UI datepicker ,However when i scroll the page the date picker remains fixed . Any ideas how to solve this ?
http://jsfiddle.net/jbK6a/3/
Regards, Neil
To solve this problem in jQuery UI 1.11.4 I added a .bind() event to the end of the datepicker instantiation:
$("*selector*").datepicker({
*settings*
}).bind('click',function () {
$("#ui-datepicker-div").appendTo("*other-selector*");
});
In my case, the "other-selector" was $(this).closest('the-date-input-parent'). This picks up the single #ui-datepicker-div box (which jQuery UI places at the end of the DOM) and moves it to a location somewhere else within the document. This can be done for multiple datepickers on the same page.
The other-selector should have position: relative; set so that the absolutely positioned #ui-datepicker-div becomes positioned relative to the new parent. Once so, it scrolls just fine.
This solution was the easiest fix to this problem (though it took a lot of time and searching to come to this conclusion) and allowed the datepicker to work correctly on mobile devices and tablets where it would otherwise be unusable.
With a little fiddling I managed to get the following:
http://jsfiddle.net/jbK6a/12/
Using this, the datepicker hides itself on page scroll. I believe there are jQuery methods to ascertain the scroll position and so with a bit more fiddling, you could then manually manipulate the datepicker and update its position based on this value...
UPDATE: Just fiddled a bit and got: http://jsfiddle.net/jbK6a/18/ which scrolls the datepicker, but it's really messy, any number of things can break it especially other collapsible elements. Fortunately Sem has a far better and cleaner solution :)
(Thought I'd add my code anyway though)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With