Bootstrap datepicker不能用于模态

时间:2015-02-25 14:26:01

标签: twitter-bootstrap-3 bootstrap-modal bootstrap-datepicker

当我在模态中使用datepicker时,datepicker不起作用。

我使用事件show.bs.modal来修改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();

})

但是当datepicker打开时,此事件会再次被触发。 因此,它会删除日期输入的值。选择日期也行不通。

这是一个演示问题的jsfiddle: http://jsfiddle.net/f9de9z8x/26/

知道什么是错的吗?

2 个答案:

答案 0 :(得分:2)

尝试使用shown事件而不是show事件。

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

http://jsfiddle.net/kp0q9s9L/

答案 1 :(得分:0)

试试这个,

$( “input.date选取器”)。单击(函数(){

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

});