2

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

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



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

        });

here is the markup for the date field:-

<input Value="24/05/2016" class="datepicker" data-val="true" data-val-date="The field Live Date must be a date." id="LiveDate" name="LiveDate" type="text" value="24/05/2016 00:00:00" /><span class="requiredicon">

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?

now i read a lot about this problem but could not find any approach that will work in my case.

Solution 1 as mentioned here linke, is to use the following script:-

$(function() {
    $.validator.methods.date = function (value, element) {
        if ($.browser.webkit) {

            //ES - Chrome does not use the locale when new Date objects instantiated:
            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));
        }
    };
});

but when i added this script inside the scripts section inside my view, i have noted that the client side validation for non-date fields have been disabled also,, which i do not want. for example if i leave a required int field empty , the page will reload before showing the validation error . this will happen when i added the above script, so seems the above script will affect non-date field client side validation also.

Solution 2 . is to use this inside my view, to remove the data-val-date,

$("input[data-val-date]").removeAttr("data-val-date");

now i added this at the end of my view, but it did not disable the client side validation for my Date fields.

so can anyone adivce on this please?

Community
  • 1
  • 1
John John
  • 1
  • 72
  • 238
  • 501
  • 1
    Look at the [other dupe](http://stackoverflow.com/questions/27285458/jquery-ui-datepicker-and-mvc-view-model-type-datetime) I linked to in your previous question (the `$.validator` validates dates based on `MM/dd/yyyy` format) –  May 23 '16 at 22:38
  • @StephenMuecke i am totally confused ,, now my code is working well in IE & Firefox .. so is there is a problem with the $.validator then it should not work on any browser.. ... now our server (hosting server) time format is DD/MM/YYYY ... – John John May 23 '16 at 22:42
  • @StephenMuecke thanks for the link ,, but i am not sure what i need to do ? should i add this script to my view ?? $.validator.addMethod('date', function (value, element) { if (this.optional(element)) { return true; } var valid = true; try { $.datepicker.parseDate('dd/mm/yy', value); } catch (err) { valid = false; } return valid; }); – John John May 23 '16 at 22:44
  • 1
    I'm not sure how your claiming its working in IE & Firefox, unless you have some other issues with your code. And note that you should never set the `value` attribute when using the `HtmlHelper` methods so start by removing your `new { @value = ....` code - you set the value of `LiveDate` in the controller before you pass the model to the view –  May 23 '16 at 22:48
  • 1
    And, yes, just copy that code into your view (but not inside `$(document).ready`) –  May 23 '16 at 22:50
  • @StephenMuecke the date picket is working well insdie IE and firefox,, and that value will be saved inside the database correctly.. why you are assuming that my code should not work on IE and firefox ,, while it is working well – John John May 23 '16 at 22:50
  • 1
    Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112721/discussion-between-stephen-muecke-and-john-g). –  May 23 '16 at 22:51

1 Answers1

1

This worked for me:

$.validator.addMethod('date',
function (value, element) {
    return true; // since MVC4 data-val-date is put on EVERY vm date property. Default implementation does not allow for multiple cultures...
});

Put it in your script section.

Got this from this thread (although it wasn't the accepted answer).

Daniel
  • 1,089
  • 11
  • 24