javascript - Twitter Bootstrap 3 模态中的 jQuery Datepicker

Question

我现在已经尝试了很多解决这个问题的方法，但我无法让它工作。我试图将日期选择器放入我的表单中。表单放置在 Bootstrap 模式中，整个内容通过 ajax 加载。一切正常，除了日期选择器放在模式中时根本不显示。

我希望像这样的简单解决方案:.datepicker {z-index:9999 !important;} 会奏效，但事实并非如此。有人知道一个简单的解决方案吗？

这是我的日期选择器:

$(function() {
    $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});

这是我的表格:

<form action="" method="post">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Endre artikkel</h4>
            </div>
            <div class="modal-body">                 
                <label for="arrived">Motatt</label>
                <input type="text" name="arrived" class="form-control datepicker" id="arrived">                                       
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</form>

表单加载到这个 div 中:

<div class="modal fade" id="load_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1040;"></div>

使用这个 javascript:

function edit_article(id){
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id);
}

Answer 1

添加 .datepicker() 后可能正在加载模式，您应该在加载表单后评估该代码。

function edit_article(id){
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id);
    $("#load_modal .datepicker").datepicker({ dateFormat: "yyyy-mm-dd" });
}