bootstrap-datepicker does not scroll when scrolling the modal

user_783681 0
Viewed 22750

I am using bootstrap-datepicker and would like to show the date-picker on the modal of bootstrap 2. The problem I got is the date-picker is not scrolling accordingly when scrolling the modal, it is still remained.

enter image description here

The code:

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button>
<div id="myModal" class="modal hide fade" style="height: 400px; overflow: scroll">
    <div style="height:300px"></div>
    <div>Choose Date:
        <input class="calendar" />
    </div>
    <div style="height:300px"></div>
</div>

and javascript:

var datePicker = $(".calendar").datepicker({});

The jsfiddler: http://jsfiddle.net/csrA5/

Is there any solution to make it scroll when scrolling the modal?

bootstrap-datepicker twitter-bootstrap css jquery javascript
7 Answers

I ran into this problem aswell with Stefan Petre's version of Bootstrap-datepicker (https://www.eyecon.ro/bootstrap-datepicker), the issue is the Datepicker element is attached to the body which means it will scroll with the body, fine in most cases but when you have a scrollable modal you need to attach the Datepicker to the scrollable modal's div instead, so my fix was to change Stefan's bootstrap-datepicker.js as follows -

line 28, change

  .appendTo('body')

to

  .appendTo(element.offsetParent)

and line 153, change

  var offset = this.component ? this.component.offset() : this.element.offset();

to

  var offset = this.component ? this.component.position() : this.element.position();

Early tests shows it scrolls perfectly.

In addition you may need to change the z-order of the Datepicker element to make it sit above the modal (this was my initial fix which did not deal with scrolling, I have not backed this change out yet so dont know if its still needed)

I haven'y checked but I suspect the Github version of Bootstrap-datepicker.js is doing the same thing (the sourcecode is much different to what I have from Stefan though)

user_24177810
Related