Jquery Datepicker Chrome

Question

When using jQuery UI Datepicker, we encouter a problem when used in Google Chrome: when we enter a date with a day higher than 12, it does not accept it as a valid date, this is because chrome thinks the dateformat is mm/dd/yyyy. We tried to solve this by adding code to try to force the date settings into dd/mm/yyyy

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

Is there any way to resolve this issue, so our datepicker will accept dd/mm/yyyy values? We only have this issue in google Chrome, the datefix works for firefox, ie & safari. We are using ASPX & MVC3 with this project.

If someone could solve our issue, that would be great

Thanks

Answer 1

I have had the same problem and is related with all Webkit based web browsers. If you set uppercase M the textbox show the moth with letters. The best solution for me was to override the validate date function from jquery.validate.js

Create jquery.validate.date.js and ensure it is loaded after jquery.validate.js

Add the following code to jquery.validate.date.js

$(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));
        }
    };
});

Answer 2

user1011138 solution dont work for me since .toLocaleDateString(value) doesn't parse the value string

here's the solution i came up with => in jquery.validate.js find this function definition: "date: function (value, element)" and replace the code with:

// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function (value, element) {
    var d = value.split("/");
    return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value));
},

Answer 3

Create a new jquery.validate.date.js file.

Paste the following code inside the file.

 $(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));
    }
  };
});

Now ensure that this file is loaded after jquery.validate.js file.

Answer 4

 $.validator.methods.date = function (value, element) {                
            if ($.browser.webkit) {                    
                var d = value.split("/");   
                return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value));
              }
            else {
                return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
            }
        };

Answer 5

The above solutions didn't work because jquery browser check is deprecated throwing jquery.validate.min.js Uncaught TypeError: Cannot read property 'webkit' of undefined. Exception occurred when checking element DateOfBirth, check the 'date'

In my project, I use momentjs with bootstrap datetimepicker, so this solution works great:

 $(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, 'DD/MM/YYYY').isValid();
  };
});

Call this right after loading jquery.validate()

Answer 6

You've got to override default 'en-US' date validation with 'en-GB' date validation.

• 'en-US' => 'mm/dd/yy'
• 'en-GB' => 'dd/mm/yy'

Solution:

add a "jquery.validate.date.js" file in your project and put the following code in it:

//To Fix jQuery date format 'en-GB' validation problem in Chrome
$(function () {
    $.validator.addMethod(
        "date",
        function (value, element) {
            var bits = value.match(/([0-9]+)/gi), str;
            if (!bits)
                return this.optional(element) || false;
            str = bits[1] + '/' + bits[0] + '/' + bits[2];
            return this.optional(element) || !/Invalid|NaN/.test(new Date(str));
        },
        "Please enter date in valid format [dd/mm/yyyy]"
    );
});

and make sure it load after the 'jquery.validate.min.js':

<script type="text/javascript" src="/Scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.date.js"></script>