无法让 Bootstrap 日期选择器显示在 Asp.Net Core 3.1 Web 应用程序中答案

【问题标题】：Can't get Bootstrap datepicker to show in a Asp.Net Core 3.1 web app无法让 Bootstrap 日期选择器显示在 Asp.Net Core 3.1 Web 应用程序中
【发布时间】：2020-02-02 14:47:53
【问题描述】：

我定义了以下编辑器模板（在 Views/Shared/Editor 下）：

@model System.DateTime?
<div class="editor-label">
    @Html.Label("")
</div>
<div class="editor-field">
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}", (Model == DateTime.MinValue) ? null : Model), new { @class = "text" })
</div>

<script type="text/javascript">
    $(document).ready(function () {        
        $("#@ViewData.ModelMetadata.PropertyName").datepicker({
            uiLibrary: 'bootstrap4',
            gotoCurrent: true
        });
    });
</script>

在 _Layout.cshtml 中，我有以下库：

<script src="~/lib/jquery/dist/jquery.js" type="text/javascript"></script>
<script src="~/lib/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

最后，在 Index.cshtml 中，我有以下输入控件：

@Html.EditorFor(m => m.MyDate, new { htmlAttributes = new { @class = "form-control datepicker" } });

（MyDate 在模型中定义为DateTime）

我已验证编辑器实际上正在加载我的自定义编辑器；但是，我在浏览器的控制台窗口中收到以下错误：

jquery.js:3818 jQuery.Deferred exception: $(...).datepicker is not a function TypeError: $(...).datepicker is not a function
    at HTMLDocument.<anonymous> (https://localhost:44346/:54:26)
    at mightThrow (https://localhost:44346/lib/jquery/dist/jquery.js:3534:29)
    at process (https://localhost:44346/lib/jquery/dist/jquery.js:3602:12) undefined
jQuery.Deferred.exceptionHook @ jquery.js:3818
jquery.js:3827 Uncaught TypeError: $(...).datepicker is not a function
    at HTMLDocument.<anonymous> ((index):54)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)

日期选择器无法正确呈现（或者，实际上，无法正常工作）。我认为这个错误是原因，但我不知道为什么 datepicker 不是函数。我查过了，它存在于js/bootstrap-datepicker.min.js。

在搜索问题时，一些人说这可能取决于脚本引用的顺序，但我已经以各种不同的顺序尝试了它们。谁能告诉我可能是什么问题？

【问题讨论】：

根据错误，它不是从您加载的库中加载的。请注意，Bootstrap 中的 .datepicker() 与 jQuery UI 中的 .datepicker() 不同。

标签： javascript jquery twitter-bootstrap asp.net-core

【解决方案1】：

在您的代码中，我们可以发现您添加了对 bootstrap-datepicker 和 jQuery UI 文件的引用，为了解决问题，您可以尝试删除/注释掉对 jQuery UI 文件的引用，然后检查 bootstrap datepicker 小部件是否可以工作好吧。

此外，avoid conflict 与其他 jQuery datepicker 插件，您可以尝试以下代码 sn-p。

var datepicker = $.fn.datepicker.noConflict(); 
$.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality

$('.datepicker').bootstrapDP({
    uiLibrary: 'bootstrap4',
    gotoCurrent: true
});

【讨论】：