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

can you change in your css file bootstrap-timepicker/css/bootstrap-timepicker.css

from

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
}

to

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
  z-index:1151;
}

Answer 2

For BootsTrap Calender use this

/The Calender Index CSS/

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

Answer 3

// re initialze datepicker
$(".bootstrap-datepicker").bsdatepicker({
    format: "yyyy-mm-dd",
    autoclose: true,
}).on('changeDate', function (ev) {
    $(this).bsdatepicker('hide');
});
//
$(".dropdown-menu").css({'z-index':'1100'});

Answer 4

Add z-indez in class ui-datepicker

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

Answer 5

As mccannf said in his comment:

I recommend you look at your bootstrap CSS and JS. Your modal is being set at a very high z-index value (99999). Just compare my jsfiddle above with yours

Answer 6

Try with this piece of code.

.ui-datepicker{ z-index:1151 !important; }

will solve the problem when you are using bootstrap V3