模式对话框中的日期选择器不起作用

Question

This question was asked many times and had different answers, i tried all solution suggested (using the z-index property ...) but still not working. In a page (not a popup) the code works fine. This is my code :

Modal popup :

<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 script:

   $(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

because you are calling the date picker outside...call it on modal completion call back ie .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();
                 });

           });