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

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

Answer 2

Here is another way using jQuery

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

Answer 3

Try to add the event scroll in bootstrap-datepicker.js, in function "Datepicker.prototype"

[$(window), {
                resize: $.proxy(this.place, this),
                scroll: $.proxy(this.place, this)
            }]

Answer 4

I dont know why, but positioning is based on scrolling so you need to find this code in bootstrap-datepicker.js

scrollTop = $(this.o.container).scrollTop();

and rewrite it to

scrollTop = 0;

This helped me, i hope it will help another people.

Answer 5

Solution provided by rab works but still not perfect as the datepicker flickers on scroll of bootstrap modal. So I used the jquery's scroll event to achieve smooth position change of datepicker. Here's my code:

    $( document ).scroll(function(){
        $('#modal .datepicker').datepicker('place'); //#modal is the id of the modal
    });

Answer 6

I too faced the same issue while using bootstrap datepicker in my project. I used an alternate method where in i created a hidden transparent layer inside the datepicker template inside bootstrap-datepicker.js (with classname 'hidden-layer-datepicker') and gave fixed position and occupying full height and width of the html.

    DPGlobal.template = '<div class="datepicker">'+ '<span class="hidden-layer-datepicker"></span><div class="datepicker-days">

Now when the datepicker modal pops up, the newly created layer will occupy the entire page width and height and when the user scrolls since the modal is appended to body, the datepicker modal too scrolls with it. With the introduction of the new layer, the inner scroll of the container in which the datepicker input field is present, will be negated while the modal is open.

One more thing to do is to update the datepicker modal closing event when clicking on the hidden layer and that is done using the below code inside bootstrap-datepicker.js.

    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        (this.picker.find(e.target).length && e.target.className != "hidden-layer-datepicker") ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )){
                        this.hide();
                    }

Answer 7

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)