无法使Bootstrap日期选择器显示在Asp.Net Core 3.1 Web应用程序中 [英] Can't get Bootstrap datepicker to show in a Asp.Net Core 3.1 web app

问题描述

我已经定义了以下编辑器模板(在视图"/共享"/编辑器"下):

I've defined the following editor template (under 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中，我具有以下库:

In _Layout.cshtml, I have the following libraries:

<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中，我具有以下输入控件:

Finally, in Index.cshtml, I have the following input control:

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

(MyDate在模型中定义为 DateTime )

(MyDate is defined as a DateTime in the Model)

我已经确认该编辑器实际上正在加载我的自定义编辑器；但是，在浏览器的控制台窗口中出现以下错误:

I have verified that the editor is actually loading my custom editor; however, I get the following error in the console window of the browser:

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

The date picker doesn't render properly (or, indeed, work). I assume this error is the cause, but I can't work out why datepicker isn't a function. I've checked, and it's present in js/bootstrap-datepicker.min.js.

在寻找问题时，一些人说这可能取决于脚本引用的顺序，但是我以各种不同的顺序尝试了它们.谁能告诉我这个问题可能是什么?

On searching for the issue, a few people have said that it could be down to the order of the script references, but I've tried them in various different orders. Can anyone tell me what the issue might be?

推荐答案

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

In your code, we can find that you added references to both bootstrap-datepicker and jQuery UI files, to troubleshoot the issue, you can try to remove/commentout references to jQuery UI files, then check if bootstrap datepicker widget can work well.

此外，要避免与其他jQuery冲突datepicker插件，您可以尝试以下代码段.

Besides, to avoid conflict with other jQuery datepicker plugins, you can try following code snippet.

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

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

这篇关于无法使Bootstrap日期选择器显示在Asp.Net Core 3.1 Web应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！