asp.net mvc HTML5 日期输入类型

Question

我在 visual studio 2013 年工作 asp.net mvc，其中一个字段是日期输入，但是当单击该字段并在该字段中获得焦点时，自动 HTML5日期选择器没有出现。如果我手动输入该字段，它会出现，但不会映射到该特定字段。在数据注释中，我包含了 [DataType(DataType.Date)] 但这不会显示 HTML5 日期选择器。我如何在 asp.net 中实现此目的，下面是该字段的代码，特别是

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

Answer 1

不记得这是什么时候添加的，但在旧版本的 ASP.NET MVC 中，您可以修改默认编辑器模板以添加对它的支持，或者使用 TextBoxFor 允许您指定任何自定义属性：

@Html.TextBoxFor(model => model.CustomerJoinDate, new { 
    @class = "form-control", 
    type = "date" 
})

Answer 2

通过 TextBoxFor

查看 Darin 关于 input type="date" 的回答

"...but when clicking in the field and having focus in the field the automatic HTML5 datepicker does not come up"

在基本级别，not all browsers have "native" implementation of a "datepicker", so you'll likely need to implement a plugin to work across browsers (e.g. bootstrap datepicker 等）

示例：

<p>
  See if you get a datepicker in Firefox (as of v40.0.2):
  <br />
  <input type="date" name="foo" />
</p>

第...

Answer 3

如果您希望 DateTime 模型属性使用相同的模板而不必一遍又一遍地重复相同的 Razor 代码，请在您的 Shared/EditorTemplates文件夹，内容类似：

@model DateTime

@Html.TextBoxFor(
    m => m, 
    "{0:MM/dd/yyyy}", 
    new { @class = "form-control date", type = "date" })

然后将您的 Razor 绑定替换为：

@Html.EditorFor(model => model.CustomerJoinDate)

依此类推，对于应使用此模板的每个日期字段。

这使用 overload of TextBoxFor that allows you to specify a format string 作为输入，这有助于 "masking" DateTime 值的时间部分（假设您只想输入日期）。

自 not every browser supports a native datepicker 起，您可以在本示例中使用 date class 来根据需要应用 polyfill（或者简单地使用 type=date 作为您的选择器）。

Answer 4

MVC 5.1 现在支持像这样直接使用 html 属性。您应该能够将日期放入类型属性中。

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

asp.net mvc HTML5 日期输入类型

asp.net mvc HTML5 date input type

html

asp.net-mvc

datepicker