How to fix regional settings for jQuery datepicker so it works in Firefox and IE7?

Question

I am using jQuery\' s datepicker and asp.net MVC4. The datepicker works in Firefox but in IE7 i get the message through the asp.net\'s validation that the field is not a dat

Answer 1

The following line does nothing:

$.datepicker.setDefaults($.datepicker.regional['en-GB']);

if you don't include the corresponding language file which is not included by default in the ASP.NET MVC 4 template.

You may try setting the format explicitly:

$.datepicker.setDefaults({ dateFormat: 'dd/mm/yy' });

But this only concerns how the date should be formatted after selecting it in the datepicker. It has nothing to do with validation.

The client side validation is performed by the jquery.validate plugin which in turn uses either the browser currently configured culture (which might explain the discrepancies you are observing between FF and IE, for example one might be configured to use en-GB and the other en-US) or ISO dates.

You could override this custom validation and make it use your custom format to ensure that this will work cross browser:

if (!Modernizr.inputtypes.date) {
    $(function () {
        $.datepicker.setDefaults({ dateFormat: 'dd/mm/yy' });
        $('.datefield').datepicker();
    });

    jQuery.validator.addMethod(
        'date',
        function (value, element, params) {
            if (this.optional(element)) {
                return true;
            };
            var result = false;
            try {
                $.datepicker.parseDate('dd/mm/yy', value);
                result = true;
            } catch (err) {
                result = false;
            }
            return result;
        },
        ''
    );
}

Answer 2

Jquery localization files are available at :

http://nuget.org/packages/jQuery.UI.i18n

simply run :

Install-Package jQuery.UI.i18n and add a script reference to "Scripts/jquery-ui-i18n.js"

from package manager console, then this will work: $.datepicker.setDefaults($.datepicker.regional['en-GB']);