13

我使用 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 中的一个已知错误，我可以在我的代码中做些什么来强制将日期输入表单吗？

谢谢，马克

4

5 回答 5

18

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

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

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

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
于 2014-01-22T16:02:08.967 回答
12

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

试试w3schools：在不同的浏览器中输入日期，看看有什么区别。

编辑：

过去，我使用以下内容View与 jQuery date-picker 一起工作（如果您有兴趣使用它）。

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

于 2013-08-16T16:47:35.950 回答
7

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

  • [DataType(DataType.Date)]结果<input type="date" />。看到这个答案。
  • [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]. yyyy-MM-ddchrome 日期选择器需要该格式。看到这个答案。

例如：

模型

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>
于 2017-07-19T14:31:32.767 回答
2

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

上面 erdinger 提供的解决方案没有解决在 Asp.Net Core 2.0 应用程序中使用 asp-for= 属性的人的问题。此外，如果您使用实体框架生成到数据库的迁移，删除[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 日，非表单输入对象的格式显示为Jan 26, 2016。但是，编辑表单中的结果虽然不完全完美，但将 Firefox 和 Internet Explorer 中的日期呈现为2016-01-26。在 Chrome 和 Edge 中，结果显示2016年 1 月 26 日，并允许这些浏览器的内置日历弹出窗口完美运行。

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

我希望这有帮助。

于 2017-11-09T19:56:31.657 回答
-1

我有同样的问题，但使用 MVC5。您可以尝试jQuery UI 日期选择器。本教程可以提供帮助。下面，主要部分。

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

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

    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>
  1. 使用以下代码添加编辑器模板： Views\Shared\EditorTemplates\Date.cshtml
@model 日期时间？
@Html.TextBoxFor(模型 => 模型,
   "{0:dd-MM-yyyy}",
   新的 { @class = "表单控制
   jqueryui-marker-datepicker" })

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

于 2016-05-01T16:24:21.243 回答