c# - 在特定于 ASP .NET MVC 5.1/HTML 5 中显示日期时间选择器而不是日期选择器

Question

我在 ASP .NET MVC 5.1 中编写应用程序

我有一个字段:

  [DisplayName("Date of Birth")]
  [DataType(DataType.Date)]
  public DateTime BirthDate { get; set; }

然后在 View 中

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

转化为:

如果我只是将模型中属性上方的注释更改为:

    [DisplayName("Date of Birth")]
    [DataType(DataType.DateTime)]

我没有显示任何选择器。如果我将它们更改为:

 [DisplayName("Date of Birth")]
 [DataType(DataType.Time)]

只有hh:mm可供选择。

问题:在 ASP .NET MVC 5.1 中显示日期时间选择器而不是日期选择器。我要求 ASP .NET 5.1 HTML 5 特定解决方案。

Answer 1

你的要求很挑剔...

为字段指定属性 Datatype，将生成一个 input，其具有指定的属性 type。这就是为什么当您添加 [DataType(DataType.Date)] 时，生成的输入将是一个日期选择器，但是如果您添加 [DataType(DataType.DateTime)]，输入将是 datetime 类型，因此您没有显示任何选择器。为什么？因为几年前，支持输入 datetime 的浏览器决定停止支持它，W3C 由于缺乏实现而删除了这个特性。

然而，不久前，一些浏览器供应商又开始支持 datetime-local，它又回到了草案中。截至目前，最新版本的 Chrome、Opera 和 Microsoft Edge 都支持它。

一种解决方案是按照 Ajay Kumar 的建议使用 BootStrap 或 jQuery Datetime Picker。

如果您不介意少数支持的浏览器，另一种方法是使用 datetime-local。例如这样:

@Html.TextBoxFor(model => model.BirthDate, new { type = "datetime-local"})