HTML5 change datetime format

Question

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>

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:

Answer 1

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.

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>

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