Monday, 16 January 2012

Tricky times using the MVC3 Date Validator and JQuery UI DatePicker

Today I came across a strange problem whilst seemingly writing a simple MVC3 prototype. My prototype had a textbox for a date value which I then used jQuery UI to append a date picker too. I was also using unobtrusive validation and data annotations on my models to seemingly "speed up" developing my prototype.

Although I thought I had wrote everything correctly whenever I tried to submit my form in Chrome I was getting a random error: Please enter a valid date. Originally I had suspected I had messed up the date time formatting, as I was using en-GB format, not the default en-US. Much time wasted and many things I tried had no effect.

I then by chance loaded the page in Internet Explorer only to find the issue had "vanished", so I went back to Chrome and nope it was back. Upon double checking my code I pondered if using the classname of "date" on my element could cause problems and a bit of Googling confirmed this. In short don't apply a date picker to an element with a class name of "date" otherwise Chrome gets all confused. I believe this is due to the page being HTML5 and the way Chrome parses elements etc, but for now I don't need to know too much about that ;)

Hurrah everything works again and only x amount of time wasted :(


  1. You saved my life ! Thanks so much. x amount of time wasted :( (2 days)

  2. Brilliant! not the first time I've hit something like this but this posted helped lots!

  3. Wow and a year later you saved another's life again ^^