Displaying a DateTime in MVC [duplicate] - asp.net-mvc

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

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 3

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 4

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 5

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" value=#Model.EndDate.ToString("yyyy-MM-dd") />

Answer 6

Set the type attribute to text.
#Html.TextBoxFor(m => m.MyDate, new { #type = "text" })

Answer 7

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 8

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 9

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" });