datetimepicker 在 asp.net 核心中不工作

Question

我试图在 Asp.net 核心 Razor 页面中使用 DateTimePicker。我在网上搜索了一下，发现 this page 似乎效果不错。所以，我去NuPackage找到了Bootstrap.v3.datetimepicker 4.17.45，并下载了它。安装后，我收到警告：

Bootstrap.v3.Datetimepicker 4.17.45 依赖于 bootstrap.less (>= 3.3.0) 但未找到 bootstrap.less 3.3.0 . bootstrap.less 3.3.5 的近似最佳匹配已解决。

由于项目中的bootstrap版本是3.3.5，而且是warning而不是error，所以我觉得应该没问题。我将示例代码复制到我的 cshtml 文件中，然后运行它。

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

DateTimePicker 出现了。然而，当我点击日历按钮时，没有任何反应。好像javascript不是运行ning?

到处找，在布局页找到了这部分

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>

看来我需要在此处包含包含日期时间选择器的js文件。但是，我搜索了整个项目，找不到任何包含 'datetimepicker' string.

的 js 文件

对前端结构不熟悉。我做错了什么或遗漏了什么？我的 datetimepicker 安装不成功吗？ js 脚本在我的剃刀页面上不起作用吗？我该如何诊断？

添加：我启用了 javascript 调试，但出现以下异常。它看起来确实有线，因为异常来自示例代码，运行在原始网页上没有问题。

Answer 1

DateTimePicker.js NuGet包本身会在%UserProfile%\.nuget\packages目录下，如果你需要javascript files.You可以复制它到你的项目中并添加@section Scripts { 和 } 在你的项目中。

更好的方法是使用 LibMan 或 npm 获取客户端库。

这是我项目中的一个简单示例 below.Anyway，版本由您决定：

<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>

@section Scripts
{
    <link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap-theme.min.css" />
    <script type="text/javascript" src="~/lib/jquery/1.9.1/Content/Scripts/jquery-1.9.1.js"></script>
    <script src="~/lib/moment.js/2.9.0/Content/Scripts/moment.min.js"></script>
    <script src="~/lib/bootstrap/3.3.0/content/Scripts/bootstrap.min.js"></script>
    <script src="~/lib/bootstrap.v3.datetimepicker/4.17.45/content/Scripts/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
        });
    </script>
}

注意：moment.js 应该在 datetimepicker.js

之前呈现

datetimepicker 在 asp.net 核心中不工作

datetimepicker not working in asp.net core

nuget

asp.net-core

bootstrap-4

razor-pages