Twitter Bootstrap 3 Modal中的jQuery Datepicker

Twi*_*tar 6 javascript jquery jquery-ui-datepicker twitter-bootstrap twitter-bootstrap-3

我现在一直在尝试这个问题的一些解决方案,但我无法让它工作.我试图将一个日期选择器放入我的表单中.表单放在bootstrap模式中,然后通过ajax加载整个表单.除了在放置在模态中时根本不显示的日期选择器,一切正常.

我希望这样一个简单的解决方案:.datepicker {z-index:9999!important;}可以工作,但事实并非如此.有人知道一个简单的解决方案吗?

这是我的日期选择器:

$(function() {
    $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
Run Code Online (Sandbox Code Playgroud)

这是我的表格:

<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>
Run Code Online (Sandbox Code Playgroud)

表单将加载到此div中:

<div class="modal fade" id="load_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1040;"></div>
Run Code Online (Sandbox Code Playgroud)

有了这个javascript:

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

jua*_*rro 3

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

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