HTML5 更改日期时间格式答案

【问题标题】：HTML5 change datetime formatHTML5 更改日期时间格式
【发布时间】：2015-08-04 03:29:32
【问题描述】：

我在只读文本框(type="text") 中显示日期时间值，并且它被正确呈现。但是当我尝试保存它时，HTML5 会突出显示文本框边框，我认为这意味着它未能通过 HTML5 日期验证。是因为格式吗？如果是那么如何更改格式？如果可能的话，另一个选项可能是禁用默认的 html5 验证，但我很想知道它的行为。服务器端代码如下：

<div class="panel-body in">
<fieldset class="scheduler-border">
    <div class="form-group form-group-textarea">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.LastUpdatedImage, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.TextBoxFor(m => m.LastUpdatedImage, new { @class = "form-control", @readonly = "readonly" })
        </div>
    </div>
    <div class="form-group form-group-textarea">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.LastUpdated, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.TextBoxFor(m => m.LastUpdated, new { @class = "form-control", @readonly = "readonly" })
        </div>
    </div>
    <div class="form-group form-group-textarea">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.LastPrinted, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.TextBoxFor(m => m.LastPrinted, new { @class = "form-control", @readonly = "readonly" })
        </div>
    </div>
    <div class="form-group form-group-textarea">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.LastExported, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.TextBoxFor(m => m.LastExported, new { @class = "form-control", @readonly = "readonly" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <input type="button" onclick="javascript:GetPropertySummaryDetails(@PropertyCode);" name="ShowSummary" id="ShowSummary" class="btn btn-primary" value="Export" />
        </div>
    </div>
</fieldset>

为其中一个文本框生成的 html 是：

<input class="form-control input-validation-error" data-val="true" data-val-date="The field Images Updated must be a date." data-val-required="The Images Updated field is required." id="LastUpdatedImage" name="LastUpdatedImage" readonly="readonly" type="text" value="21/05/2015 15:51:49">

图片如下：

【问题讨论】：

不知道为什么，但是type 设置为text，而不是datetime-local，所以没有进行HTML5 日期验证。（另请参阅 this post 为什么不是 datetime...）
你在使用jquery.validate.unobtrusive.js吗？如果是这样，那么您将需要使用jquery.globalize 或修改$.validator.addMethod() -refer this answer，因为jquery.validate 使用MM/dd/yyyy 格式来验证日期（而您的格式是dd/MM/yyyy）
我试过 $.validator.addMethod() 但它没有用。可能是因为我没有使用任何日期时间选择器；只是一个显示值的只读文本框。我已包含 jquery.globalize 但无法删除 jquery.validate.unobtrusive.js，因为它是布局页面中使用的捆绑包，我不确定它可能对其他页面产生什么影响。
您不需要删除jquery.validate.unobtrusive.js（jquery.globalize 就在上面，jquery.validate.js）。使用$.validator.addMethod() 的示例适用于jquery-ui datepicker，但您可以轻松修改它以将文本框解析为正确的格式。但是，最简单的解决方案是使用隐藏输入，这样控件就不会被验证。

标签： html asp.net-mvc-5

【解决方案1】：

首先，这不是与 HTML5 控件相关的问题。它与 jquery.validate.js 和 jquery.validate.unobtrusive.js` 验证表单控件有关。如果页面上不需要其他验证（例如在其他选项卡中），您可以删除这些文件，但正如您在 cmets 中指出的那样，这可能不是一个选项。

另一种解决方案是使用隐藏输入（默认情况下，隐藏输入未验证），然后将 DateTime 值呈现在 <div> 元素中，该元素的样式看起来像您的输入（边框等）

<div class="col-sm-8">
  @Html.HiddenFor(m => m.LastUpdatedImage)
  <div class="textbox">
    @Html.DisplayFor(m => m.LastUpdatedImage)
  </div>
</div>

然后根据 input[type="tetbox"] 的当前 css 为 textbox 类添加 css 定义

【讨论】：