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

模型中肯定存在数据： Model Picture

...但在“修改”模式下显示时，Chrome会显示： Chrome View

这是Chrome中的一个已知错误，我可以在代码中执行任何操作，将日期强制转换为表单吗？

谢谢，Mark

Answer 1

很抱歉复活了一个6个月大的问题，但我遇到了同样的问题并得到了一个我认为正是OP正在寻找的答案。

虽然mikhairu的回答确实有效，但它需要将类型更改为文本。 OP的屏幕截图显示了Chrome的内置日期选择器UI，它要求输入为type = date。 Chrome要求输入类型=日期的值采用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 datepicker显示日期，您需要在模型上使用两个属性：

[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; }
}

Razor查看

<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)]属性中的bool值。

我将其设置为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中，结果显示 2016年1月26日，并允许这些浏览器的内置日历弹出窗口完美运行。

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

我希望这会有所帮助。

Answer 5

我遇到了同样的问题但是使用MVC5。您可以尝试jQuery UI Date Picker。这tutorial可以提供帮助。下面是必不可少的部分。

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

在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"));

通过更新_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>

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

@model DateTime?
@Html.TextBoxFor(model => Model,
   "{0:dd-MM-yyyy}",
   new { @class = "form-control
   jqueryui-marker-datepicker" })

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

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

5 个答案: