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

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

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()

The issue could be from the type="date". That was my situation anyway. Worked once it was changed to type="text". If the interface is built with an MVC wrapper, you need to replace or set the html attribute accordingly.

You can use the InputTagHelper.Format

<input asp-for="MyDate" asp-format="{0:yyyy-MM-dd}" />

https://docs.asp.net/projects/api/en/latest/autoapi/Microsoft/AspNetCore/Mvc/TagHelpers/InputTagHelper/#prop-Microsoft.AspNetCore.Mvc.TagHelpers.InputTagHelper.Format

You don't need any jquery or ASP feature for fixing it. Simple JS will do just fine. The problem is that the browser requires the format yyyy-mm-dd.

And toLocaleString doesn't allow the date to be in this format. So after searching I found out that this is ISO format and we can use Date().toISOString() to get the date in the required format.

I used the slice method to extract the date part only because Date().toISOString() returns date with time.

My code:

date: new Date().toISOString().slice(0, 10)

Set the type attribute to text.

@Html.TextBoxFor(m => m.MyDate, new { @type = "text"  })

I'd like to highlight something in the answer here.

If you are building an application that has Globalization and Localization then the method of passing in a format using a Html helper will be better. You can also just use EditorFor and pass in the necessary id or class for datepicker.

I was facing the same problem I Did this and it started working

<input type="date" class="form-control text-box single-line" id="EndDate" name="EndDate" [email protected]("yyyy-MM-dd") />