时间戳

首页 > 解决方案 > MVC5 的日期选择器，C#

c# - MVC5 的日期选择器，C#

问题描述

我正在尝试将 DatePicker 添加到我在 MVC5 中的编辑和创建视图中。我在网上看了一些教程。一个是 JavaScript，另一个是 Bootstrap。无论哪种方式，我都会发现错误并且我被难住了。

让我们使用 Bootstrap，因为我已经从 js 教程中删除了所有代码。这是我所在的位置：

我用 NuGet 安装了 BootStrap.Datepicker

在我的模型中，我的日期字段如下所示：

     [Key]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:MM-dd-yyyy}", ApplyFormatInEditMode = true)]
    [Display(Name = "Transaction Date")]
    [Column(Order = 1, TypeName = "date")]

    [Column(TypeName = "date")]
    [DisplayFormat(DataFormatString = "{0:MM-dd-yyyy}", ApplyFormatInEditMode = true)]
    [Display(Name = "Disposition Date")]
    public DateTime? DISPOSITION_DT { get; set; }

我将以下内容添加到我的 BundleConfig.cs

            bundles.Add(new ScriptBundle("~/bundles/datePicker").Include(
       "~/Scripts/moment.min.js",
       "~/Scripts/bootstrap-datetimepicker.min.js"));

        bundles.Add(new StyleBundle("~/Content/datepicker").Include(
                 "~/Content/bootstrap-datetimepicker.min.css"));

将以下内容添加到我的 _Layout.cshtml

    @Styles.Render("~/Content/datepicker")
    @Scripts.Render("~/bundles/datePicker")

这是我的编辑视图的示例，其中我们有一个日期字段

        <div class="form-group">
        @Html.LabelFor(model => model.DISPOSITION_DT, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.DISPOSITION_DT, new { htmlAttributes = new { @class = "datepicker form-control" } })
            @Html.ValidationMessageFor(model => model.DISPOSITION_DT, "", new { @class = "text-danger" })
        </div>
    </div>

我的脚本在我的视图底部

<script>
$(document).ready(function () {
    $('.datetimepicker').datetimepicker({
        format: 'lll'
    });
});


@Scripts.Render("~/bundles/jqueryval")

}

当视图加载时，我收到以下错误。. .

错误：对象不支持属性或方法“datetimepicker”

我的研究告诉我，这可能是由于我的 js 文件没有正确加载。但是，我不明白为什么或如何解决它。

谢谢您的帮助。请记住，我是 MVC5、Bootstrap 和 C# 的新手。我以前在 asp.net 网络表单 vb.net 中编码。. 并使用 ajax 工具快速添加我过去的日期选择器。我的工作正朝着新的方向发展，而我是一只试图学习新把戏的老狗。

标签： c#asp.net-mvc-5datepicker

解决方案

我回答了我自己的问题。. . .

我正在关注的教程在捆绑包中有错字

它不是“~/Scripts/bootstrap-datetimepicker.min.js

它是：bootstrap-datepicker.min.js

问题解决了。日期选择器现在正在工作。

推荐阅读