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

Answer 2

If anyone else comes across this, in my case it was because the day in my date had only one digit and this was messing it up. If your date day is less than 10, make sure to do new Date().toLocaleString("en-US", { day: "2-digit" });

Answer 3

Set the type attribute to text.

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

Answer 4

A simplified solution that worked for me was.

  // Format: YYYY-MM-DD
  const day = new Date().toLocaleString("en-US", { day: "2-digit" });
  const month = new Date().toLocaleString("en-US", { month: "2-digit" });
  const year = new Date().getFullYear();

  // Assign to input variable
  document.getElementById("reservation_date").value = `${year}-${month}-${day}`;

Answer 5

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)

Answer 6

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.

Answer 7

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.

Answer 8

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

Answer 9

I was getting this warning by assigning the value to html5 date input. I just converted to the required format(yyyy-MM-dd) according then its fine.

All my logic is to calculate next date and assign to other date input. I'll share my whole logic.

HTML Code:

  <input type='date' name="booking_starts" id="booking_starts" autocomplete="off" />

  <input type='date' name="booking_ends" id="booking_ends" autocomplete="off" />

Js Code:

   $('#booking_starts').change(function() {
        var start   = $("#booking_starts").val();
        var result  = new Date(start);
        var end     = result.setDate(result.getDate() + 1);
        $("#booking_ends").val(dateToYMD(end));
    });

    function dateToYMD(end_date) {
        var ed = new Date(end_date);
        var d = ed.getDate();
        var m = ed.getMonth() + 1;
        var y = ed.getFullYear();
        return '' + y + '-' + (m<=9 ? '0' + m : m) + '-' + (d <= 9 ? '0' + d : d);
    }

Answer 10

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") />