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

try this

#ui-datepicker-div {
  z-index: 100000;
}

Answer 2

add z-index above 1051 in class datepicker

add something like this in page or css

<style>
.datepicker{z-index:1151 !important;}
</style>

Answer 3

try use this code it works for me. by the way it came from this site https://github.com/eternicode/bootstrap-datepicker/issues/464 .

$('#datepicker').datepicker().on('show', function () {
                var modal = $('#datepicker').closest('.modal');
                var datePicker = $('body').find('.datepicker');
                if (!modal.length) {
                    $(datePicker).css('z-index', 'auto');
                    return;
                }
                var zIndexModal = $(modal).css('z-index');
                $(datePicker).css('z-index', zIndexModal + 1);
            });

Answer 4

Fwiw. Necro but still.

for <link href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet">

I needed

<style type="text/css">
.ui-timepicker-container {z-index: 1151 !important;}
</style>    

in the HEAD of the doc for it to accept the override

I tried most every other solution on here before resorting to that.