MVC 的日期选择器的 dd-mm-yyyy 格式在 Chrome 中不起作用

Posted 2023-05-07

【中文标题】MVC 的日期选择器的 dd-mm-yyyy 格式在 Chrome 中不起作用

【英文标题】：dd-mm-yyyy format for datepicker of MVC is not working in Chrome

【发布时间】：2015-09-07 10:04:27

【问题描述】：

在用于输入出生日期的 MVC5 Razor 代码中，我使用如下日期选择器

    @html.EditorFor(model => model.date_of_birth, 
new  htmlAttributes = new  @class = "m-wrap  datepicker"  )

这里是 model.date_of_birth EditorFor 正在调用并使其成为 datepicker 和 @class = datepicker

然后使用以下代码在脚本区域启动日期选择器

 $('.datepicker').datepicker(
            format: 'yyyy-mm-dd',
            autoclose: true
        )

这里的日期格式是'yyyy-mm-dd'，它工作正常，但用户希望它是dd-mm-yyyy 格式。所以我将脚本中的格式更改为dd-mm-yyyy 在 Internet Explorer 中它工作正常，但在 Chrome 中它在某些日期出现错误

eg:  14-05-2015

出生日期*字段必须是日期。

日期11-05-2015 在 chrome 中也可以正常工作。所以我猜 Chrome 正在采用mm-dd-yyyy 中的日期格式。

'dd-M-yyyy' 格式也可以正常工作，只有 dd-mm-yyyy 出现错误

有什么办法可以克服这个浏览器特有的错误？

编辑

$.validator.addMethod('date', function (value, element) 
    if (this.optional(element)) 
        return true;
    
    var valid = true;
    try 
        $.datepicker.parseDate('dd/mm/yyyy', value);
    
    catch (err) 
        valid = false;
    
    return valid;
);

$(function () 

 $('.datepicker').datepicker(
            format: 'dd/mm/yyyy',
            autoclose: true
        )
);

【问题讨论】：

问题是 jquery.validate.js 需要 `MM/dd/yyyy 或 ISO 格式的日期。解决方案请参考this answer。

@Stephenmuecke 一个疑问..如果 jquery.validate.js 有问题，那么它在 Internet Explorer 中的工作方式。

不知道 - 但是 IE 可以正常工作:)

@stephenMuecke 我应用了脚本并现在更改，即使日期小于 12 也不接受:( 05/07/2015 也给出错误

对我来说很好。您可以编辑问题以显示您尝试过的实际代码吗（注意$.validator.addMethod() 不应该在document.ready() 内）

【参考方案1】：

我终于找到了解决办法。

首先，我创建一个名为 jquery.validate.date.js 的新 java 脚本文件 里面有下面的代码

$(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中的日期验证函数

然后我在'jquery.validate.js' 之后调用脚本，如下所示

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.val.js")"/>

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.val.date.js")"/>

现在日期格式 dd/mm/yyyy 在 chrome 和 IE 中都可以正常工作。

【参考方案2】：

非 'yyyy-MM-dd' 格式的日期的不显眼验证器存在问题。类似的问题是here。

通过禁用日期验证来解决

jQuery.validator.methods["date"] = function (value, element)  return true;  

或通过使用全球化。

在我的情况下，我总是将输入设置为只读并从 jquery.ui 添加日期选择器。本地化。

@Html.TextBoxFor(model => model.date_of_birth, 
    new  htmlAttributes = new  @class = "m-wrap  datepicker", @readonly="readonly"  )

还有一些js：

// include localization for datepicker

$( "#date_of_birth" )
    .datepicker( $.datepicker.regional[ "ru" ] )
    .datepicker( dateFormat: 'dd-mm-yy' );

【讨论】：

我不明白你的做法。

@Sachu 只是创建只读输入并在其上初始化 jquery datepicker。这使您可以防止用户输入错误，并始终在字段中具有正确的格式值。编辑答案。

【参考方案3】：

您可能需要在 web.config 中设置文化，以便 .net 期望日期为 dd-mm-yyyy 格式，而不是默认的 mm-dd-yyyy US 格式。

例如

<configuration>
    <system.web>
        <globalization culture="en-AU" uiCulture="en-AU" />
    </system.web>
</configuration>

更新

还可以尝试注释属性 例如

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "0:dd-MM-yyyy")]
public DateTime date_of_birth;

【讨论】：

您是否在注释模型的 date_of_birth 属性？...可以尝试添加 [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "0:dd-MM-yyyy")]