0

I am working on an asp.net mvc-4 web application. and i have a field of type DateTime, where i defined a jQuery datepicker to populate its value as follow:-

<div>
<span class="f"> @Html.DisplayNameFor(model => model.LiveDate) </span> 
@Html.TextBoxFor(model => model.LiveDate, new { @class = "datepicker", @Value = (Model != null && Model.LiveDate.HasValue) ? Model.LiveDate.Value.ToString("dd/MM/yyyy") : string.Empty })<span class="requiredicon"> *</span> 
@Html.ValidationMessageFor(model => model.LiveDate)
</div>


  $(".datepicker").datepicker({
            dateFormat: "dd/mm/yy",
            showOn: "both"

        });

now when i try selecting a date from the jQuery date picker such as 17/05/2016 i will get the following error The field Live Date must be a date. only on Safari & Chrome web browsers, while on IE and Firefox it will work well. also if i select a date such as 01/05/2016 it will work on all the browsers,,, so can anyone advice on this please?

John John
  • 1
  • 72
  • 238
  • 501
  • @BenG they are the same on inside jQuery the other inside the html helper.. and my code is working well on IE & firefox .. – John John May 23 '16 at 20:25
  • Agreed - try the solution in BenG's link. – Zach May 23 '16 at 20:38
  • @Zach ok no problem.now i tried Milan's solution , where i added the following script at the end of my view :- $(function () { $.validator.methods.date = function (value, element) { if ($.browser.webkit) { var d = new Date(); return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value))); } else { return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); } }; }); – John John May 23 '16 at 20:51
  • @Zach and seems it solves the problem on firefox and chrome.. but to be honest i can not understand what the script is doing, and if it will cause any issues i am unaware of – John John May 23 '16 at 20:51
  • From what I can see, you're overwriting the MVC jquery validator for handling dates. What it typically does is parse the string to a date and run some regular expression tests against it to validate `return this.optional(element) || !/Invalid|NaN/.test(new Date(value));` but in webkit browsers (i.e. Chrome and Safari) the new Date(value) must be failing because value does not match the locale format that webkit browsers expect by default. So in order to explicitly tell these browsers to use the locale, you do the following: `new Date(d.toLocaleDateString(value));`. – Zach May 24 '16 at 12:30
  • Actually, the more I look at this and play around with it, the less I trust this answer. Specifically, `new Date(d.toLocaleDateString(value));` doesn't look like it'll do what I expect. According to to the mozilla docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString - it's expecting a locale format for the parameter, not a date string. My JSFiddle here breaks on this test - https://jsfiddle.net/h54srga4/ so, john G, put a breakpoint on the validate function and see what is passed in as value. Also check the console for errors. – Zach May 24 '16 at 12:52
  • I hate locking in a validator to a particular locale format, because it's not clean and flexible, but if you're sure that the format will always be dd/mm/yyyy, then I believe a much cleaner solution is found here in my fiddle: https://jsfiddle.net/fk4Lp6am/2/ where you no longer need the if/else browser check. You just need to add `var d = value.split('/');` and `return this.optional(element) || !/Invalid|NaN/.test(new Date(d[2], d[1] - 1, d[0]));` inside a try/catch where the catch returns false; – Zach May 24 '16 at 13:10

0 Answers0