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

Solution 1

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.

Solution 2

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)

Solution 3

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

Solution 4

Set the type attribute to text.

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

View more solutions

Comments

[Sam]

How can I do this only for Chrome. But not IE?