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?

Answer 1

Here is another way using jQuery

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

Answer 2

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 );        
    }
);