Bootstrap datepicker not woking in modal

Question

When I use a datepicker inside a modal the datepicker is not working.

I use the event show.bs.modal to modify some content of the modal on show:

$(function(){
    $('#statusModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var title = button.data('title');
        var input_date = button.data('date');
        var modal = $(this);

        modal.find('.modal-title').text('Clicked: ' + title);
        modal.find('.modal-body #inputDate').val(input_date);

        $('#inputDate').datepicker();

    }).on('hidden.bs.modal', function (event) {
        $('#inputDate').datepicker('remove');
    });

    $('#inputDate2').datepicker();

})

But this event gets fired again when the datepicker opens. Because of this, it delets the value of the date input. And selecting a date does also not work.

Here a jsfiddle that demonstrates the problem: http://jsfiddle.net/f9de9z8x/26/

Any idea what's wrong?

Answer 1

Try this,

$("input.date-picker").click(function(){

$("#ui-datepicker-div").css("z-index",5000);    

});

Answer 2

Try using the shown event instead of the show event.

$('#statusModal').on('shown.bs.modal', function (event) {

http://jsfiddle.net/kp0q9s9L/