Jquery 日期选择器 Chrome

Jquery Datepicker Chrome

提问by Vince V.

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

在使用jQuery UI Datepicker时，我们在谷歌浏览器中遇到一个问题：当我们输入的日期大于12时，它不接受它作为有效日期，这是因为chrome认为日期格式是mm/dd/ yyyy。我们尝试通过添加代码来尝试将日期设置强制为 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.

有没有办法解决这个问题，所以我们的日期选择器会接受 dd/mm/yyyy 值？我们只有谷歌浏览器有这个问题，日期修正适用于 Firefox，即 & safari。我们在这个项目中使用 ASPX 和 MVC3。

If someone could solve our issue, that would be great

如果有人能解决我们的问题，那就太好了

Thanks

谢谢

回答by user1011138

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

我遇到了同样的问题，并且与所有基于 Webkit 的 Web 浏览器有关。如果您设置大写 M，则文本框会显示带有字母的飞蛾。对我来说最好的解决方案是覆盖 jquery.validate.js 中的验证日期函数

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

创建 jquery.validate.date.js 并确保它在 jquery.validate.js 之后加载

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

将以下代码添加到 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));
        }
    };
});

回答by Chtiwi Malek

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

user1011138 解决方案对我不起作用，因为.toLocaleDateString(value)不解析value字符串

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:

这是我想出的解决方案 => 在 jquery.validate.js 中找到这个函数定义：“日期：函数（值，元素）”并将代码替换为：

// 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));
},

回答by mijaved

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

您必须使用“en-GB”日期验证覆盖默认的“en-US”日期验证。

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

• '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:

在您的项目中添加一个“jquery.validate.date.js”文件并在其中放入以下代码：

//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':

并确保它在“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>

回答by Milan

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

创建一个新的 jquery.validate.date.js 文件。

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.

现在确保在 jquery.validate.js 文件之后加载此文件。

回答by Korayem

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'

上述解决方案不起作用，因为不推荐使用 jquery 浏览器检查抛出 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 momentjswith bootstrap datetimepicker, so this solution works great:

在我的项目中，我将momentjs与bootstrap datetimepicker一起使用，因此此解决方案非常有效：

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

Call this right after loading jquery.validate()

加载后立即调用 jquery.validate()

回答by Nayan Hodar

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