Jquery Datepicker赢得'；t在引导模式下打开

我的视图中有一个带有日期选择器输入字段的简单模式。我遵循了stack overflow中的答案中的一些说明，但我所拥有的仍然不起作用，我不知道为什么

以下是我的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>

$（'#mdl'）。在（'click'，函数（）{
var parent=$（this）.closest（'.jumbotron'）；
var name=parent.find（'input[name=“name\u 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'）。查找（'.modal title'）；
标题位置。文本（名称）；
//对于每一个信息，你都必须像上面那样做。。。
$（'myModal'）.modal（'show'）；
});
});
$（函数（）{
$（'.date picker'）.datepicker（）；
})

以下是模态：

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

&时代；
模态中的一些文本

拯救

---

任何帮助都将不胜感激。

您的问题与图书馆的顺序有关：

将顺序更改为：

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

致：

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

因此，结果是：

$（函数（）{
$（'#mdl'）。在（'click'，函数（）{
var parent=$（this）.closest（'.jumbotron'）；
var name=parent.find（'input[name=“name\u 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'）。查找（'.modal title'）；
标题位置。文本（名称）；
//对于每一个信息，你都必须像上面那样做。。。
$（'myModal'）.modal（'show'）；
});
$（'.date picker'）.datepicker（）；
});

点击我
&时代；
模态中的一些文本

拯救
对于必须完成的事情：

将此添加到css中：
将此添加到您的js中
第一次呈现页面时是否存在您的模式，或者是动态添加（例如，使用ajax），在这种情况下，您需要在添加插件后附加插件。没有动态添加插件。您的脚本顺序错误-
jquery
然后
jquery ui
：）仍然无法工作。请尝试本文中的答案。我按照你的建议做了，但还是不行。我知道你的代码片段是有效的，所以你知道可能有什么问题吗？@RobertRoss在dom中插入js代码。代码段已更新。如果您继续收到邮件，请告诉我errors@getanoM，我仍然得到未捕获的TypeError:$（…）。日期选择器不是HTMLDocument中的函数。（DisplayListOfRolesUser:96）在Object.add[as done]（jquery-1.10.2.js:3108）在init.ready（jquery-1.10.2.js:285）在init（jquery-1.10.2.js:228）在jquery（jquery-1.10.2.js:77）在HTMLDocument。（DisplayListOfRolesUser:95）在j（jquery.min.js:1）在k（jquery.min.js:1）在您的错误消息和html片段中，我看到您包含了两个不同版本的jquery库。深入查看代码，只使用一个jQuery库，然后包括一个兼容的jQuery ui库。我希望这对你有帮助。
.datepicker-panel {
   z-index: 9999 !important; /* has to be larger than 1050 */
}
.datepicker-container {
   z-index: 9999 !important; /* has to be larger than 1050 */
}

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