jQuery datepicker在Chrome和Firefox上显示不同

时间:2013-02-03 02:08:39

标签: google-chrome jquery-ui-datepicker

在MVC3应用程序中,我使用了一个jQuery datepicker插件,它在Firefox和Chrome中显示完全不同。应用程序中有相关代码和两个屏幕截图:

<head>
    <link href="@Url.Content("~/Content/themes/redmond/jquery-ui-1.8.18.custom.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.18.custom.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker-fr.js")" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $('.datefield').datepicker({
                showOn: 'both',
                buttonImage: "/content/images/calendar.gif",
                showAnim: "clip",
                regional: "fr",
                defaultDate: null,
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>

@using(...)
{
    ...
    @Html.LabelFor(model => model.candidat.date_naissance)
    @Html.EditorFor(model => model.candidat.date_naissance, new { @class = "date" })
    ...
}

我使用EditorTemplate:

@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

在模型中,字段candidat.date_naissance是:

[Required(ErrorMessageResourceType = typeof(CandidatResources), ErrorMessageResourceName = "RequiredDateNaissanceMessage")]
[Display(ResourceType = typeof(CandidatResources), Name = "DateNaissanceDisplay")]
[DataType(DataType.Date, ErrorMessageResourceType = typeof(CandidatResources), ErrorMessageResourceName = "InvalidDateNaissanceMessage")]
public System.DateTime date_naissance { get; set; }

生成的HTML是:

    在Firefox中
  • input type="date" value="12/19/1974" name="candidat.date_naissance" id="candidat_date_naissance" data-val-required="La date de naissance est obligatoire" data-val="true" class="datefield hasDatepicker"
    
  • Chrome中的
  • input class="datefield hasDatepicker" data-val="true" data-val-required="La date de naissance est obligatoire" id="candidat_date_naissance" name="candidat.date_naissance" type="date" value="12/19/1974"
    

最后,以下是相同数据的截图:

火狐:

Firefox

铬:

Chrome

在Chrome中,即使已经存在日期,也会显示字符串“mm / dd / yyyy”(例如,在日期输入并保存在Firefox中之后,我希望在刷新时也能在Chrome中看到它这不会发生。)

这种行为的解释是什么以及如何解决?

我已经尝试了this solution,但无济于事。

注意: 这在Cassini服务器和IIS(本地和虚拟框中)都会发生。

1 个答案:

答案 0 :(得分:4)

请参阅以下文章。 如果您想在值属性或表单提交中应用mm / dd / yyyy格式,则不应使用type = date。