MVC的datepicker的dd-mm-yyyy格式在Chrome中不起作用

时间:2015-06-22 03:30:17

标签: asp.net-mvc datepicker

在用于输入出生日期的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').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
        })
});

3 个答案:

答案 0 :(得分:9)

最后我找到了解决方案。

首先,我创建一个名为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中都有效,没有任何错误。

答案 1 :(得分:2)

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

通过禁用日期验证来解决

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

或使用全球化。

在我的情况下,我总是将输入设置为readonly并从jquery.ui添加datepicker。本地化。

@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' });

答案 2 :(得分:0)

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

e.g。

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

<强>更新

还可以尝试为该属性添加注释 e.g。

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