jQuery date validation MVC 4 .Net 4.5.1 UK date “must be a date” Error

Question

I have an app that I have recently upgraded to .Net 4.5.1 and MVC 4. I am using the jQuery datepicker and jQuery.validation 1.11.1.

I am in the UK therefore the dates will be in the en-GB locale ("dd/mm/yyyy"). I have tried what is suggested here, here and here but to no avail.

I also have in my web.config:

<globalization uiCulture="en-GB" culture="en-GB" />

and have set the globalisation in IIS to en-GB, but every date that is input is validated as a US format date.

Can anyone help please?

Answer 1

Changing the date validation method in jQuery.validate.js to the follwing solved the issue:

date: function (value, element) {
        $.culture = Globalize.culture("en-GB");
        var date = Globalize.parseDate(value, "dd/MM/yyyy", "en-GB");
        return this.optional(element) || 
                       !/Invalid|NaN/.test(new Date(date).toString());
    }

Tested in Chrome, FF and IE

Answer 2

in The Jquery which is calling simply add the format.

$(function() { $("#datepicker").datepicker({dateFormat: 'dd/mm/yy'}); });

http://www.matthewcarlin.co.uk/jquery-quick-tip-2-changing-date-format

Answer 3

Having just had to figure this out, I overrode the rule and used a data attribute

if (typeof jQuery.validator.methods.date !== 'function') {
    var f = function (value, element) {
        var e = $(element).attr('data-dateformat');
        if (e && (e.length)) {
            var dt = jQuery.datepicker.parseDate(e, value);
            return this.optional(element) || !/Invalid|NaN/.test(dt.toString());
        } else {
            return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());
        }
    }
    jQuery.validator.addMethod("date", f);
} else {
    var m = jQuery.validator.methods.date;
    var f = function(value, element) {
        var e = $(element).attr('data-dateformat');
        if (e && (e.length)) {
            var dt = jQuery.datepicker.parseDate(e, value);
            return this.optional(element) || !/Invalid|NaN/.test(dt.toString());
        } else {
            return m(value, element);
        }
    }
    jQuery.validator.addMethod("date", f);
}

It ASSUMES you have datepicker, but if you are using dates, and jQuery, I think that's a safe bet. If the element has a date format defined in data-dateformat it will parse it using that, otherwise it will fall back to the default date rule, and if that wasn't present it implements the default rule.

I placed this in my site global code file to keep it outside the jQuery scripts