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

我使用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

尝试删除[DataType(DataType.Date)]因为我相信这会创建 。 如果你这样做，你最终会得到一个 ，你可以附加jQuery日期选择器。

尝试w3schools：在不同的浏览器中输入类型日期以查看差异。

编辑：

在过去，我在View使用以下内容来使用jQuery日期选择器（如果您对使用它感兴趣）。

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

Answer 2

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

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

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

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

Answer 3

要使用默认的chrome datepicker显示日期，您需要在模型上使用两个属性：

• [DataType(DataType.Date)]导致 。 看到这个答案。
• [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] 。 chrome日期选择器需要格式为yyyy-MM-dd 。 看到这个答案 。

例如：

模型

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

剃刀视图

 
 @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" }) 
 @* Control with date picker *@ @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" }) 
  

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语法中的视图代码如下所示：

鉴于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 。 本教程可以提供帮助。 下面，必不可少的部分。

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

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

     bundles.Add（new ScriptBundle（“〜/ bundles / jqueryui”）
           .INCLUDE（ “〜/脚本/ jQuery的UI- {版本}的.js”））;
    bundles.Add（new StyleBundle（“〜/ Content / jqueryui”）
           .INCLUDE（ “〜/内容/主题/碱/ all.css”））; 

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

     @ Styles.Render（ “〜/内容/ jQueryUI的”） 

在其底部添加：

 @Scripts.Render("~/bundles/jqueryui")  

4. 使用以下代码添加编辑器模板 Views\Shared\EditorTemplates\Date.cshtml ：

  @model DateTime？
 @ Html.TextBoxFor（model => Model，
    “{0：DD-MM-YYYY}”，
   新{@class =“表格控制
    jqueryui-marker-datepicker“}） 

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