Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Date picker not moving with page scroll

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

like image 703
Neil Avatar asked Sep 10 '12 12:09

Neil


2 Answers

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.

like image 167
Spartanicus Avatar answered Oct 07 '22 03:10

Spartanicus


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)

like image 22
Jamey Avatar answered Oct 07 '22 04:10

Jamey