jQuery日期选择器在Chrome中的问题

Question

使用jQuery UI Datepicker时，在Google Chrome中遇到了一个问题：当我们输入的日期天数大于12时，它不会将其作为有效日期接受，这是因为Chrome认为日期格式是mm/dd/yyyy。我们尝试通过添加代码来强制日期设置为dd/mm/yyyy来解决此问题。

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

有没有办法解决这个问题，使我们的日期选择器能够接受dd/mm/yyyy格式的值？ 我们只在Google Chrome中出现了这个问题，datefix可以在Firefox、IE和Safari中正常工作。 我们正在使用ASPX和MVC3来完成这个项目。

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

谢谢。

- Vince V.

---

根据 https://dev59.com/HGkw5IYBdhLWcg3wzdtF ，$.browser 现在已经被弃用，因此唯一真正有效的答案是 mijaved 的：https://dev59.com/sG025IYBdhLWcg3wf2OE#39118730。其他答案会抛出异常。不幸的是，目前我没有足够的积分来评论他的答案。 - Arquimaes

Answer 1

我曾经遇到过同样的问题，它与所有基于Webkit的浏览器有关。如果您设置大写字母“M”，文本框将显示带字母的月份。对我来说最好的解决方案是覆盖jquery.validate.js中的validate date函数。

创建jquery.validate.date.js并确保在jquery.validate.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));
        }
    };
});

- user1011138

---

new Date(d.toLocaleDateString(value)) 总是表示当前日期，而不是反映 value 字符串的值。 - Caleb Vear

请记住，$.browser已被JQuery 1.9弃用并移除。http://api.jquery.com/jQuery.browser/ - D.Rosado

这对我没有用，toLocalDateString生成“未捕获的范围错误：无效的语言标记：30/08/2013”。 - MarkB

我已经有了jquery.validate.js的代码，但它不起作用，和MarkB提到的一样出现错误。 - bokkie

遇到了MarkB提到的相同错误。我使用下面的解决方案。 - adelb

Answer 2

由于 .toLocaleDateString(value) 无法解析 value 字符串，因此 user1011138 的解决方案对我无效。

以下是我想出的解决方案 => 在 jquery.validate.js 中找到函数定义："date: function (value, element)" 并将代码替换为：

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

- Chtioui Malek

---

请确保在行末调整数组的格式，但对我来说这很有效，请谢谢。 - Sam

我有一个问题，如何使其验证31天、12个月和年份？这是否可能？ - Gerardo Jaramillo

问题已经解决。基本上，这个问题与chrome和chromium有关。问题是通过jquery 1.8+被识别出来的。我认为这只是一个临时修复，因为它取决于最新的jquery更新。感谢@Chtiwi Malek。 - Benjamin RD

这对我也起作用了。花了半天时间在“全局”层面上寻找解决方案。 - user2151486

谢谢你的解决方案。我尝试了被接受的答案，但它给了我无效的语言错误，所以我尝试了你的。它运行良好。 - Ubiquitous Developers

这仍然没有起作用。我使用UC浏览器。我需要使用远程注释。不知道它是否与案例有影响。 - toha

Answer 3

以下解决方案无法使用，因为jquery浏览器检查已被弃用，会抛出 jquery.validate.min.js Uncaught TypeError: Cannot read property 'webkit' of undefined 异常，该异常在检查元素DateOfBirth时发生，请检查'date'。

在我的项目中，我使用momentjs和bootstrap datetimepicker，因此这个解决方案非常有效。

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

在加载完jquery.validate()后立即调用此函数。

- Korayem

---

很高兴听到这个消息！请分享爱心并点赞回答，谢谢 @user3284707 - Korayem

Answer 4

您需要覆盖默认的“en-US”日期验证，改为“en-GB”日期验证。

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

解决方法:

在您的项目中添加一个“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]"
    );
});

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

- mijaved

Answer 5

创建一个新的jquery.validate.date.js文件。 将以下代码粘贴到文件中。

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

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

- Milan

---

我遇到了完全相同的问题，你的脚本对我很有效。但是我不确定你的脚本具体做了什么？它有任何限制吗？ - John John

代码首先检查浏览器。如果条件是Chrome，否则是其他浏览器。由于Chrome在实例化新的Date对象时不使用区域设置，因此在Chrome中使用.toLocaleDateString（value），而其他浏览器则不需要。 - Milan

你是复制粘贴了这个2011年写的解决方案吗？https://dev59.com/sG025IYBdhLWcg3wf2OE#7878085 - Korayem

@Korayem 如果我复制/粘贴了解决方案，那么我就没有像上面那样解释答案。所以放松点。 - Milan

Answer 6

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

- Nayan Hodar

---

感谢Chtiwi Malek提供的代码。这段代码在Chrome和Firefox中都能正常工作。 - Nayan Hodar

我遇到了错误：jquery.validate.min.js Uncaught TypeError: Cannot read property 'webkit' of undefined.，同时在检查 DateOfBirth 元素时出现了异常，需要检查 date 方法。 - Korayem