jquery - The specified value does not conform to the required format yyyy-MM-dd

Question

I have a .Net MVC 5 application that is using Data Annotations, Entity-Framework Jquery 2.1.3 and Jquery UI 1.11.4.

When I render an edit form with an input of type date using the UK format "dd/MM/YYYY"; the following error message appears when using Google Chrome:

The specified value '10/10/2001' does not conform to the required format, 'yyyy-MM-dd'. jquery-2.1.3.js:5317

Model

public class MyModel
{
    [Column(TypeName = "date"), DataType(DataType.Date), Display(Name = "My date")]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]
    public string MyDate { get; set; }
}

Mark up

<input class="text-box single-line" data-val="true" data-val-date="The field My date must be a date." id="MyDate" name="MyDate" type="date" value="10/10/2001" />

The value is set correctly in the input control but the date does not appear in the browser. I first thought this was an issue with jQuery as it is appearing the jQuery script file, but when testing in IE and Firefox everything is working fine.

I then assumed it was my regional setting in chrome as by default Chrome thinks everyone English is in America, I changed the regional setting to UK and still the same issue appears.

A simple fix would be to change the format in my model to universal but to UK users this is a little alien.

Is there a way to tell chrome that accept date formats in "dd/MM/YYYY"?

Answer 1

The specifications for the HTML5 date picker state that the date must be in the format yyyy-MM-dd (ISO format). This means that you DisplayFormatAttribute must be

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public string MyDate { get; set; }

Alternatively you can manually add the format using

@Html.TextBoxFor(m => m.MyDate, "{0:yyyy-MM-dd}", new { @type = "date"  })

The later option allows you to keep the DataFormatString = "{0:dd/MM/yyyy}") for usage in @Html.DisplayFor()