ASP.Net MVC C# Chrome 在编辑模式下不显示日期

Question

我使用 Google Chrome V28 作为我的浏览器 - 我的模型上的 DataAnnotations 有问题，这迫使 Chrome 在我的视图中呈现数据时间类型时使用它自己的内置日历。

我的模型是：

public class ObScore
{
    public int ObScoreId { get; set; }

    ...
    ...
    [DisplayFormat(DataFormatString = "{0:dd MMMM yyyy}", ApplyFormatInEditMode = true)]
    [Display(Name = "Date")]
    [DataType(DataType.Date)]
    public DateTime Date { get; set; }
    ...
    ...
}

模型中肯定有数据：

...但在编辑模式下显示时，Chrome 会显示：

这是 Chrome 中的一个已知错误，我可以在我的代码中做些什么来强制将日期输入表单吗？

谢谢，马克

Answer 1

很抱歉重新提出一个 6 个月大的问题，但我遇到了同样的问题，并且我认为答案正是 OP 正在寻找的。​​p>

虽然 mikhairu 的回答确实有效，但需要将类型更改为文本。 OP 的屏幕截图显示了 Chrome 的内置日期选择器 UI，它要求输入为 type=date。 Chrome 要求输入 type=date 的值采用 YYYY-MM-DD 格式，大概是为了避免任何特定于文化的歧义。

因此，在您的模型中，将此数据注释添加到您的日期属性中：

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

Answer 2

尝试删除[DataType(DataType.Date)]，因为我相信这会创建<input type="date" />。如果你这样做，你最终会得到一个<input type="text" />，你可以将 jQuery 日期选择器附加到它。

在不同的浏览器中尝试w3schools: input type date 看看有什么不同。

编辑：

过去，我在View 中使用了以下内容，以便与 jQuery 日期选择器一起使用（如果您有兴趣使用它）。

@Html.TextBoxFor(model => model.DateOfBirth, @"{0:yyyy\/MM\/dd}", new { @class = "datepicker" })

Answer 3

要使用默认的 chrome 日期选择器显示日期，您的模型需要两个属性：

• [DataType(DataType.Date)] 导致 <input type="date" />。见this answer.
• [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]。 chrome 日期选择器需要yyyy-MM-dd 格式。见this answer。

例如：

型号

public class ObScore
{
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime Date { get; set; }
}

剃刀视图

<div class="form-group">
    @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">

        @* Control with date picker *@
        @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
    </div>
</div>

Answer 4

在 Asp.Net Core 2.0 中开发 MVC 应用程序时，我一直在努力解决这个问题。似乎真的没有适用于所有浏览器的完美解决方案。

上述 erdinger 提供的解决方案无法解决在 Asp.Net Core 2.0 应用程序中使用 asp-for= 属性的人的问题。此外，如果您使用 Entity Framework 生成到数据库的迁移，删除模型中的 [DataType(DataType.Date)] 属性将导致您的数据库表中的数据类型被创建（或更改）为文本类型，而实际上您可能需要数据库表中的日期类型。我建议单独保留[DataType(DataType.Date)] 属性。

正如我上面所说，没有适用于所有浏览器的完美解决方案。所以，我所做的只是稍微妥协，不需要编辑表单的确切格式，同时仍然为所有其他日期显示保留我的特殊格式。

这是我的模型的 DateCompleted 部分：

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MMM dd, yyyy}", ApplyFormatInEditMode = false)]
[Display(Name = "Date Completed")]
public DateTime DateCompleted { get; set; }

您可能会注意到，我更改的主要内容是[DisplayFormat(DataFormatString = "{0:MMM dd, yyyy}", ApplyFormatInEditMode = false)] 属性中的布尔值。

我将其设置为 false 而不是 true。通过完全消除 ApplyFormatInEditMode 部分，您也可以获得相同的结果。

如：[DisplayFormat(DataFormatString = "{0:MMM dd, yyyy}")]

razor 语法中的视图代码如下所示：

<div class="form-group">
    <label asp-for="DateCompleted" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input asp-for="DateCompleted" class="form-control" />
        <span asp-validation-for="DateCompleted" class="text-danger"></span>
    </div>
</div>

假设日期为 2016 年 1 月 26 日，非表单输入对象的格式显示为 2016 年 1 月 26 日。但是，编辑表单中的结果虽然并不完美，但会将 Firefox 和 Internet Explorer 中的日期呈现为 2016-01-26。在 Chrome 和 Edge 中，结果显示 1/26/2016，并允许这些浏览器的内置日历弹出窗口完美运行。

好在所有这些浏览器都在非表单输入情况下显示所需的日期格式，并且仍然至少在表单字段中显示日期而不是显示dd/mm/yyyy。

我希望这会有所帮助。

Answer 5

我遇到了同样的问题，但使用的是 MVC5。你可以试试jQuery UI Date Picker。这个tutorial 可以提供帮助。下面是基本部分。

1. 通过 NuGet 安装 jQuery.UI.Combined，这会将所需的 css 和 js 文件添加到您的项目中。

2. 在App_Start\BundleConfig.cs中包含添加的css和js文件

   bundles.Add(new ScriptBundle("~/bundles/jqueryui")
          .Include("~/Scripts/jquery-ui-{version}.js"));
   bundles.Add(new StyleBundle("~/Content/jqueryui")
          .Include("~/Content/themes/base/all.css"));

3. 通过更新_Layout.cshtml 在视图中引用所需的文件。 在这个文件的顶部添加：

   @Styles.Render("~/Content/jqueryui")

在其底部添加：

@Scripts.Render("~/bundles/jqueryui")
<script>
    $(function () {
        $(".jqueryui-marker-datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            changeYear: true,
            showOn: "button"
        }).css("display", "inline-block").next("button").button({
            icons: { primary: "ui-icon-calendar" },
            label: "Select a date",
            text: false
        });
    });
</script>

4. 添加editor template Views\Shared\EditorTemplates\Date.cshtml 使用以下代码：

@model 日期时间？
@Html.TextBoxFor(模型 => 模型,
   "{0:dd-MM-yyyy}",
   新 { @class= "表单控制
   jqueryui-marker-datepicker" })

您的日期字段现在将有一个日期选择器，在编辑模式中显示正确的日期。