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 date.

This is the code for the datepicker

if (!Modernizr.inputtypes.date) {
        $(function() {
            $.datepicker.setDefaults($.datepicker.regional['en-GB']);
            $(".datefield").datepicker();
        });
    }

This is my globalization setting in Web.config

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

E.g. in Firefox the date is shown as "19/03/2012" string and accepted by the asp.net's validation setup (client and server side). In IE7 the same date string is not accepted on the client. If i change it to "03/19/2012" the client accepts the date but then the server throws an exception - "InvalidOperationException. Nullable object must have a value."

My viewModel uses a null-able DateTime that i cast to a non null-able DateTime in the controllers post action. This works in Firefox but in IE7 the value for the date from the viewModel is null. What is the problem?

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']);