输入类型日期的客户端验证不起作用答案

【问题标题】：Client-side validation of input type date does not work输入类型日期的客户端验证不起作用
【发布时间】：2011-12-15 08:10:21
【问题描述】：

我有一个包含日期和日期时间字段的表单：

@Html.TextBoxFor(model => model.A, new { @type = "datetime" })
@Html.TextBoxFor(model => model.B, new { @type = "date" })

型号：

public class TestModel
{
  [DataType(DataType.Date)]
  public DateTime A {get;set;}

  [DataType(DataType.Date)]
  public DateTime B {get;set;}
}

通过使用这些输入类型，iPad 显示了不错的日期（时间）选择器。这些字段使用客户端验证进行验证。对于日期时间字段 (A) 它可以工作，但日期字段 (B) 将引发错误：“请输入有效日期”。我该如何解决？

例子：

在 iPad 上调试代码很困难，所以我不知道 Safari 在设置输入的 value 属性时如何更改日期格式。

编辑：我发现日期时间格式是通用日期时间格式（yyyy-MM-DDTHH:mmZ），而日期格式是yyyy-MM-dd。由于本地化，客户端验证器可能确实理解通用日期时间而不是 yyyy-MM-dd。

【问题讨论】：

请给出B 的输入示例，该示例会引发“请输入有效日期”错误但您认为有效。
@Guillaume 的已删除评论：它是有效的 HTML，但并非每个浏览器都能处理。由于 iPad 支持这些输入类型，我只在 iPad 视图中使用它。对于普通浏览器，我使用 jQuery 日期时间选择器。
type="date" 是 HTML5 中的新内容。你的文档类型是什么？ dev.w3.org/html5/markup/input.html
@Guillaume 它是有效的，但在HTML 5 中，因此在所有地方都不受支持。
@Guillaume，它与文档类型无关。问题是 datetime 类型的值根据 MVC 客户端验证有效，但（几乎相同的格式）日期类型的值不是。

【解决方案1】：

在查看我正在 iPhone 上开发的移动网站时，我遇到了完全相同的问题，并且感到难以置信。下面问题中的讨论为我解决了这个问题。

此外，为了以无缝方式实现这一目标，我为日期数据类型创建了以下剃须刀编辑器模板：

@model DateTime?
@Html.TextBox("myDate", ViewData.Model.ToIso8601FullDate(), new { type = "date", @class = "text-box single-line" })

还有一个方便的扩展方法，可以根据spec for input type=date 为 html 5 日期输入类型提供它喜欢使用的格式：

public static string ToIso8601FullDate(this DateTime? d)
{
    if (!d.HasValue) return null;

    return d.Value.ToString("yyyy-MM-dd");
}

【讨论】：

如果您在一页上有多个 DateTime 控件，这将不起作用，因为它们都将具有相同的 ID。如何将“myDate”字符串更改为独特的，例如模型的 PropertyName？