bootstrap-datepicker does not scroll when scrolling the modal

Question

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.

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?

Solution 1

There is option datepicker('place') to update position . I have updated jsfiddle

var datePicker = $(".calendar").datepicker({});
var t ;
$( document ).on(
    'DOMMouseScroll mousewheel scroll',
    '#myModal', 
    function(){       
        window.clearTimeout( t );
        t = window.setTimeout( function(){            
            $('.calendar').datepicker('place')
        }, 100 );        
    }
);

Solution 2

Here is another way using jQuery

var checkout = $(".calendar").datepicker({});
$( "#myModal" ).scroll(function() {
    $('.calendar').datepicker('place')
});

Comments

[Shujaath Khan]

this works when there is scroll bar. for example if I have bootstrap modal which occupies whole screen and date picker in last row. How handle that situation. datepicker goes below the screen.

[vfranchi]

I just added the scroll bind to the modal instead of the document. But it works nicely. Thanks!!

[deffrin joseph]

Please look at this fiddle.I used this for a similar problem stackoverflow.com/questions/12351871/… jsfiddle.net/jbK6a/15

[deadend]

checkout variable now used?