javascript - 为什么我的日期输入没有读取模型值？

Question

我是一名服务器端人员，试图自学一些 CSS、Javascript、jQuery 等。我编写了一个小测试项目来加载模型并在简单的文本框中显示值。工作正常，如您所见:

当然，我想适本地显示这些日期。因此，让我将这些输入类型更改为“日期”。这是 Razor 代码:

@Html.TextBoxFor(m => m.Date, new { @type="date", @id="ondate" })

好吧，这奏效了……有点。我的意思是，它现在显示为日期选择器...但它不再显示模型的日期!

我做错了什么？

Answer 1

type="date" 属性呈现浏览器的 HTML5 日期选择器。为了使其正常工作，格式需要是 yyyy-MM-dd(ISO 格式)，所以它需要是

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

或者，您可以在属性上设置数据属性

[DataType(DataType.DateTime)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime Date { get; set; }

并使用

@Html.EditorFor(m => m.Date)

它添加了 type="date" 属性并使用了正确的格式。

旁注:

1. HTML5 日期选择器仅在最新版本的 Chrome 中受支持
2. 使用 EditorFor()(在 MVC-4 中)不允许您设置 id属性，但不清楚为什么需要更改默认 id="Date" 为 id="ondate"