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

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



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





Are you wanting to render the browsers HTML5 datepicker implementation (or are you using a jquery plugin)?
– Stephen Muecke
Jun 12 '15 at 8:47





I suggest you use datepicker ui so the ISO format is sent to the server while dd/MM/dddd will be configured at client side.
– Bellash
Jun 12 '15 at 8:49


datepicker ui


dd/MM/dddd





@StephenMuecke I was going to let the browser handle the date picker, so there is one less need for a third party library.
– Andy Clark
Jun 12 '15 at 9:00





If your using the browser datepicker, your need to specifiy the attribute as [DisplayFormat(DataFormatString = "0:yyyy-MM-dd", ApplyInEditMode = true)]. The browser will then display the value in the browsers locale settings, but post back the ISO format so it will be correctly bound. But note that this is only supported in modern browsers.
– Stephen Muecke
Jun 12 '15 at 9:09


[DisplayFormat(DataFormatString = "0:yyyy-MM-dd", ApplyInEditMode = true)]





Doing this also renders the date in universal format when using DisplayFor() helper method
– Andy Clark
Jun 12 '15 at 9:16




5 Answers
5



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


yyyy-MM-dd


DisplayFormatAttribute


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


DataFormatString = "0:dd/MM/yyyy")


@Html.DisplayFor()





Is there any less janky workaround than using JS to reformat the box after loading the page? [DisplayFormat] causes jQuery to reset the field and give an invalid value message in the console. Formatting it in TextBoxFor solves this error (and allows me to apply my mask plugin), but still displays the date in ISO format. On domReady, I move the values around to use American formatting.
– Sinjai
Jul 28 '17 at 20:17


[DisplayFormat]


TextBoxFor





@Sinjai, Sorry, I don't understand your comment. [DisplayFormat] and jQuery are not related in anyway (it will not reset a value), and this question/answer relates to the browsers HTML-5 datepicker implementation (it has nothing to do with a mask plugin). If your having an issue, then ask a new question with the relevant details
– Stephen Muecke
Jul 29 '17 at 0:43


[DisplayFormat]





Yeah, probably too much for an aside in a comment. I don't have any better way to word it for a question, though. jQuery is used in ASP.NET MVC projects for validation, and I presume that's what's freaking out. Console just says the error originates in jquery-version.js. Don't worry about it.
– Sinjai
Jul 29 '17 at 0:54





I know this is an old question but I'm hoping for an answer and it feels stupid writing a formal question about this... ApplyFormatInEditMode = true is used to keep the format in @Html.EditorFor() right? then howcome I still get that error (the one in the question) in the console when trying to fill an @Html.EditorFor() with a DateTime and [DisplayFormat(DataFormatString = "0:yyyy-MM-dd", ApplyFormatInEditMode = true)].... Any ideas? or am I confusing Edit mode with something else?
– FllnAngl
Aug 8 at 12:51



ApplyFormatInEditMode = true


@Html.EditorFor()


@Html.EditorFor()


DateTime


[DisplayFormat(DataFormatString = "0:yyyy-MM-dd", ApplyFormatInEditMode = true)]


Edit mode





@FllnAngl, If its not working for you, then I can only assume you have other code, or something your not telling us that is causing the issue.
– Stephen Muecke
Aug 10 at 22:53



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





How can I do this only for Chrome. But not IE?
– Sam
Mar 29 at 16:33



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.



Set the type attribute to text.


type


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



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.






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Image
Clash Royale CLAN TAG #URR8PPP Firebase Auth - with Email and Password - Check user already registered I want to check when a user attempts to signup with createUserWithEmailAndPassword() in Firebase user Authentication method, this user is already registered with my app. createUserWithEmailAndPassword() 8 Answers 8 To detect whether a user with that email address already exists, you can detect when the call to createUserWithEmailAndPassword () fails with auth/email-already-in-use . I see that @Srinivasan just posted an answer for this. createUserWithEmailAndPassword () auth/email-already-in-use Alternatively, you can detect that an email address is already used by calling fetchSignInMethodsForEmail() (previous called fetchProvidersForEmail() ). fetchSignInMethodsForEmail() fetchProvidersForEmail() When the user trying to create an user with same email address, the task response will be "Response: The email address is already in use by another account." mFirebas...
Read more

Dynamically update html content plain JS

Image
Clash Royale CLAN TAG #URR8PPP Dynamically update html content plain JS So I have a script bound in my index.html, which literally has to fetch an array of jsons from an api, then dynamically update my page when get response. But as a result I'm getting an as the only update of my page. here is my script fetch(url) .then((resp) => resp.json()) .then((resp) => resp.results.forEach(item => fetch(item.url) .then((response)=> response.json()) .then((response) => pokeArr.push(response)) .catch(console.log) ) ).catch(console.log) const filler = () => if(!pokeArr) return 0 pokeArr.map((i,j)=> return `<tr>$i.name</tr>` ) const pokeindex = () => document.getElementById('a').appendChild(document.createElement(filler())) pokeindex() When I'm consoling it, I can see in the console all the responses I get, so I'm at least doing the fetching part right. What's parberakan ? What's pokeArr ? – T.J. Crowder Aug 8 at 12...
Read more

Creating a leaderboard in HTML/JS

Image
Clash Royale CLAN TAG #URR8PPP Creating a leaderboard in HTML/JS I'm trying to create a top 10 leaderboard, for now, I've only implemented 3 players, but I'm coming across an issue. My script doesn't seem to be outputting anything on webpage. The purpose of the script is to compare 3 arrays, player1,player2,and player3 solely based off of score. Which is the 2nd index of each array. I want the script to list the players in order of highest score. This method doesn't really seem to be efficient, especially when I'll have to add 7 more players. Could someone suggest perhaps an easier approach, as well as show me why my script wont output the info. Here's the JS function leaderboard() { var player1 = name:"Thomas",date:"01/23/18",score:"201"; var player2 = name:"Michael",date:"03/24/17",score:"943"; var player3 = Name:"Lisa",date:"06/04/18",Score:"79"; if(player1[2]...
Read more