HTML5改变日期时间格式 [英] HTML5 change datetime format

问题描述

我在一个只读文本框（类型=文本）显示日期时间值，它是正确呈现。但是，当我试图挽救它，HTML5突出了文本边界，我觉得意味着它已没有HTML5日期验证。难道是因为格式的？如果是那么如何改变格式？另一种选择，如果可能的话，可以禁用默认的HTML5验证，但我很好奇，想知道它的行为。服务器端code是如下：

I am displaying the datetime values in a readonly textbox(type="text") and it is rendered correctly. But when I try to save it, HTML5 highlights the textbox border which I think means that it has failed HTML5 date validation. Is it because of the format? If it is then how to change the format?. The other option, if possible, could be to disable the default html5 validation but I am curious to know its behaviour. The server side code is below:

<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是：

The html which is generated for one of the textbox is:

<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">

图片是如下：

The image is below:

推荐答案

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

Firstly this is not an issue related to HTML5 controls. Its related to jquery.validate.js and jquery.validate.unobtrusive.js` validating the form controls. You could remove those files if there are no other validation required on the page (e.g. in the other tabs) but as you have indicated in your comments, this may not be an option.

另一种解决方案是使用隐藏的输入（默认情况下，隐藏的输入没有经过验证），然后呈现在＆LT的的DateTime 价值; DIV＆GT ; 元素的样式看起来像你的输入（边框等）

Another solution is to use hidden inputs (by default, hidden inputs are not validated) and then render the DateTime value inside a <div> element that is styled to look like your input (borders etc)

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

，然后添加一个CSS定义为基于类在当前的CSS的输入[类型=tetbox] 文本框$ C>

and then add a css definition for the textbox class based on your current css for input[type="tetbox"]

这篇关于HTML5改变日期时间格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！