Question

这个问题被多次询问并有不同的答案，我尝试了所有解决方案建议（使用z-index属性...）但仍然无法正常工作。在页面（不是弹出窗口）中，代码工作正常。这是我的代码：

模态弹出式广告

<button class="btn btn-azure" id="bootbox-operation">Add operation</button>

<div id="newOperationModal" style="display: none;">
<div class="row">
    <div class="col-md-6 col-sm-6 col-xs-12">
        <div class="form-group">
            <div class="input-group">
                <input class="form-control datepicker" type="text" data-date-format="dd-mm-yyyy">
                <span class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                </span>
            </div>
        </div>
    </div>

Jquery脚本：

   $(function () {
        $("#bootbox-operation").on('click',
            function () {                   
                bootbox.dialog({
                    message: $("#newOperationModal").html(),                       
                    title: "Nouvelle opération : Chargement",
                    className: "modal-success",
                    buttons: {
                        success: {
                            label: "Enregistrer",
                            className: "btn-blue",
                            callback: function () { }
                        },
                        "Annuler": {
                            className: "btn-default",
                            callback: function () { }
                        }
                    }
                });
                $(function () { 
                    console.log("test");
                    $(".datepicker").datepicker();
                });  
            });

    });

    //--Bootstrap Date Picker--
    //$(function () { // will trigger when the document is ready
    //    $(".datepicker").datepicker();
    //});

Answer 1

因为您在外面拨打日期选择器...在模态完成回拨时调用它，即.on('shown.bs.modal'

  $(function () {

       var box=  bootbox.dialog({
                    message: $("#newOperationModal").html(),                       
                    title: "Nouvelle opération : Chargement",
                    className: "modal-success",
                    buttons: {
                        success: {
                            label: "Enregistrer",
                            className: "btn-blue",
                            callback: function () { }
                        },
                        "Annuler": {
                            className: "btn-default",
                            callback: function () { }
                        }
                    }
                });

                box.on("shown.bs.modal", function() {
                     $(".datepicker").datepicker();
                 });

           });

模态对话框内的Datepicker无法正常工作

1 个答案: