Question

I have datetime input in my ASP.NET MVC3 app:

<div class="editor-field">
    @Html.EditorFor(model => model.Article.PublishedDate)
    @Html.ValidationMessageFor(model => model.Article.PublishedDate)
</div>

In Opera it makes special input for date and time but when I edit my model it´s empty and I want to set it to value. In other browsers it´s regular textbox and there is datetime set. Code which is generated thanks that code is:

<input class="text-box single-line" data-val="true" data-val-required="Publish date is required" id="Article_PublishedDate" name="Article.PublishedDate" type="datetime" value="30.3.2012 10:00:00" data-default-value=""/>

How can I fix it and set datetime in Opera too?

Answer 1

You need to format your datetime according to the RFC3339 standard

HTML5 input datetime spec: http://dev.w3.org/html5/markup/input.datetime.html

So your value needs to be formated something like this:

<input ... type="datetime" value="2012-03-30T10:00:00" ... />

To format a date as RFC3339 you can call:

DateTime.ToString("yyyy-MM-ddThh:mm:ssZ");

You can accomplish this by adding a DisplayFormatAttribute to you Article.PublishedDate:

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-ddThh:mm:ssZ}")]
public DateTime PublishedDate { get; set; }

Problem now (at least for me) is that the property now always stays formated like this. You could use an EditorFor Template for this:

@model DateTime?

@{
    var attributes = new Dictionary<string, object>();

    attributes.Add("type", "datetime");

    attributes.Add("class", "text-box single-line");

    //since this is a constraint, IsRequired and other constraints 
    //won't necessarily apply in the browser, but in case script 
    //turns off readonly we want the constraints passed
    if (ViewData.ModelMetadata.IsReadOnly)
    {
        attributes.Add("readonly", "readonly");
    }

    if (ViewData.ModelMetadata.IsRequired)
    {
        attributes.Add("required", "required");
    }
}
@Html.TextBox("", Model.HasValue ? Model.Value.ToUniversalTime().ToString("yyyy-MM-ddThh:mm:ssZ") : String.Empty, attributes)

Based on DateTime.cshtml

And for local dates:

@model DateTime?
@{
  var attributes = new Dictionary<string, object>();

  attributes.Add("type", "datetime-local");
  attributes.Add("class", "text-box single-line");

  if (ViewData.ModelMetadata.IsRequired)
  {
    attributes.Add("required", "required");
  }
}
@Html.TextBox("", Model.HasValue ? Model.Value.ToLocalTime().ToString("yyyy-MM-ddTHH:mm:ss") : String.Empty, attributes)

Based on DateTime-Local.cshtml