Bootstrap datepicker не работает в модальном режиме

Когда я использую средство выбора даты внутри модального окна, средство выбора даты не работает.

Я использую событие show.bs.modal для изменения некоторого содержимого модального окна на шоу:

$(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();

})

Но это событие запускается снова, когда открывается средство выбора даты. Из-за этого он удаляет значение ввода даты. И выбор даты тоже не работает.

Вот jsfiddle, демонстрирующий проблему: http://jsfiddle.net/f9de9z8x/26/

Есть идеи, что случилось?


person Stefan    schedule 25.02.2015    source источник
comment
Я оказался здесь после всех этих лет, и замена шоу на шоу не было для меня вариантом. Я исправил проблему с помощью хака и предложил решение, которое, возможно, вы могли бы использовать: github. com/uxsolutions/bootstrap-datepicker/issues/2571   -  person carlosrafaelgn    schedule 02.06.2020


Ответы (2)


Попробуйте использовать событие shown вместо события show.

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

http://jsfiddle.net/kp0q9s9L/

person Schmalzy    schedule 25.02.2015
comment
Нет проблем, хотя вы заметите, что вы получаете вспышку даты в модальном окне, потому что JavaScript не выполняется до тех пор, пока модальное окно не станет видимым для пользователя. - person Schmalzy; 25.02.2015
comment
пожалуйста, взгляните на комментарий, который я только что отправил к вопросу. Возможно, это могло бы помочь и вам. - person carlosrafaelgn; 02.06.2020

Попробуй это,

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

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

});

person Siddique Aboobacker    schedule 24.08.2015