Datepicker 不会在引导模式中打开

Question

我的视图中有一个带有日期选择器输入字段的简单模式。我按照堆栈溢出答案中的一些说明进行操作，但我仍然无法正常工作，我不知道为什么。

这是我的 asp.net mvc 视图中的脚本部分：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">

    $('#mdl').on('click', function () {
       var parent = $(this).closest('.jumbotron');
       var name = parent.find('input[name="NAME_OF_MODEL"]').val();
       var id = parent.find('input[name="ID_OF_MODEL"]').val();
       console.log(id);
       //var titleLocation = $('#myModal').find('.modal-body'); modal - title
       var titleLocation = $('#myModal').find('.modal-title');
       titleLocation.text(name);

       // for each information you'll have to do like above...

       $('#myModal').modal('show');

     });
});

    $(function () {
        $('.date-picker').datepicker();
    })


</script>

这里是模态：

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
            <p>Some text in the modal.</p>
            <input class='date-picker' />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
        </div>
    </div>
</div>

任何帮助将不胜感激。

Answer 1

您的问题与库的顺序有关：

更改顺序：

• jquery-ui.css
• jquery-ui.min.js
• jquery.min.js

到：

• jquery.min.js
• jquery-ui.css
• jquery-ui.min.js

所以结果是：

$(function () {

  $('#mdl').on('click', function () {
    var parent = $(this).closest('.jumbotron');
    var name = parent.find('input[name="NAME_OF_MODEL"]').val();
    var id = parent.find('input[name="ID_OF_MODEL"]').val();
    console.log(id);
    //var titleLocation = $('#myModal').find('.modal-body'); modal - title
    var titleLocation = $('#myModal').find('.modal-title');
    titleLocation.text(name);

    // for each information you'll have to do like above...

    $('#myModal').modal('show');

  });
  $('.date-picker').datepicker();

});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button class="btn" id="mdl">Click Me</button>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
                <input class='date-picker'/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>

Answer 2

必须要做的事情：

1. 将此添加到您的 CSS：

.datepicker-panel {
   z-index: 9999 !important; /* has to be larger than 1050 */
}
.datepicker-container {
   z-index: 9999 !important; /* has to be larger than 1050 */
}

1. 将此添加到您的 js 中

  $('#datepicker').datepicker({
    container: '#my-modal',
  });