Twitter Bootstrap Datepicker within modal window

Question

I am currently using the Twitter Bootstrap framework, and when using the modal windows I cannot get over js elements to work like datepicker or validation, though chosen and

Answer 1

I think is better to change the logical function in the plugin. Around row 552 i change this:

            var zIndex = parseInt(this.element.parents().filter(function(){
                return $(this).css('z-index') !== 'auto';
            }).first().css('z-index'))+10;

into this:

            var zIndex = parseInt(this.element.parents().filter(function(){
                return $(this).css('z-index') !== 'auto';
            }).first().css('z-index')) + 10 * 1000; //think is enought

Answer 2

For Bootstrap 3.x and Ace Template wrapbootstrap

Datepicker and Timepicker inside a Modal

<style>
    body.modal-open .datepicker {
        z-index: 1050 !important;
    }
    body.modal-open .bootstrap-timepicker-widget {
        z-index: 1050 !important;
    }
</style>

Answer 3

let me help you,

you can to update your bootstrap.min.css

in class dropdown-menu you can to change z-index value into 2000

so datepicker will show up

Answer 4

Try to change z-index value for .modal and .modal-backdrop less than .datepicker z-index value.

Answer 5

if You use bootstrap V3 try this.

    .bootstrap-datetimepicker-widget 
    {
        z-index: 1200   !important;
    }

Answer 6

I had this error, because i scrolled bottom. Datepicker had wrong top position in fixed. I just use it now like:

$('#myModal').on('show.bs.modal', function (e) {
            $(document).scrollTop(0);
});

and its working fine now.