Twitter Bootstrap 3 模态中的 jQuery Datepicker答案

【问题标题】：jQuery Datepicker in Twitter Bootstrap 3 ModalTwitter Bootstrap 3 模态中的 jQuery Datepicker
【发布时间】：2014-01-29 13:25:10
【问题描述】：

我现在已经尝试了很多解决这个问题的方法，但我无法让它工作。我试图在我的表单中加入一个日期选择器。表单被放置在引导模式中，并且整个事情都是通过 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);
}

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 jquery-ui-datepicker

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果你在文档上调用这个代码ready()

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

没有带有日期选择器的表单，所以它没有被初始化

加载表单后再次调用它。

这应该解决你的问题

【讨论】：

【解决方案3】：

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

我认为你犯了这个错误......

请看这个链接http://jsfiddle.net/TB8Yt/

【讨论】：

【解决方案4】：

听起来我遇到了完全相同的问题。我的模态中有一个日期选择器，第一次打开屏幕时日期选择器工作正常，但第二次单击日期字段时没有任何反应，并且任何进一步打开模态时，日期选择器不再工作。我没有深入研究这段代码，但似乎日期选择器代码必须在打开日期选择器 ui 对象时进行查找，然后不再运行。

为了解决这个问题，我在打开模式时运行它：

$("#modal").on('hidden.bs.modal', function() {
    $('#ui-datepicker-div').remove();
});

我的日期选择器现在可以正常工作了。这个 ui-datepicker-div 是 datepicker 在你运行$( ".datepicker" ).datepicker();时自动创建的@

【讨论】：