MVC 5 显示日期时间格式答案

【问题标题】：MVC 5 Display Datetime formatMVC 5 显示日期时间格式
【发布时间】：2016-05-27 03:04:51
【问题描述】：

我是 MVC 的新手。我有一个日期时间属性和数据注释，如下所示：

        [ReadOnly(true)]
        [DataType(DataType.DateTime), DisplayFormat(ApplyFormatInEditMode = true, ConvertEmptyStringToNull = true, DataFormatString = "{0: dd/MMM/yyyy HH:mm:ss}", HtmlEncode = true, NullDisplayText = "-")]
        [DisplayName("Last Update")]        
        [Required(AllowEmptyStrings = false, ErrorMessage = "Last Update is required.")]
        public DateTime LastUpdate { get; set; }

在创建页面时显示良好。但是当我提交时，我收到验证错误消息“字段 Last Update 必须是日期”，并且无法处理数据。然后我必须将输入格式更改为“yyyy/MM/dd”并且没有时间提交。

我正在使用@Html.EditorFor()。如何使用 EditorFor() 在创建页面中显示日期格式（dd/MMM/yyyy），并在索引页面中显示日期时间格式（dd/MMM/yyyy HH:mm:ss）？或者当 EditorFor 取值日期时间格式如 (dd/MMM/yyyy HH:mm:ss) 时如何通过验证？

【问题讨论】：

您可以使用@Html.TextBoxFor(m => m.LastUpdate, "{0:dd/MM/yyyy}")。另请注意，您的大多数属性都不是必需的。删除 [DataType(DataType.DateTime)、ApplyFormatInEditMode = true、ConvertEmptyStringToNull = true 和 NullDisplayText = "-"。如果您确实想要浏览器的 HTML-5 编辑器，那么它需要是`@Html.TextBoxFor(m => m.LastUpdate, "{0:yyyy-MM-dd}", new { type = "date" })，但它仅在 Chrome 和 Edge 中受支持

标签： c# asp.net-mvc date datetime asp.net-mvc-5

【解决方案1】：

最好使用文本框来获得所需的功能。这是我所做的方式。检查是否有任何帮助：

型号：

    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    [MyDate(ErrorMessage = "Date Of Birth cannot be greater than Today")]
    [Required(ErrorMessage = "Date Of Birth Required")]
    public DateTime? EndDate { get; set; }

查看：

      @Html.ValidationMessageFor(m => m.EndDate, "*")
      @Html.LabelFor(m => m.EndDate, "Date :", new { style = "display:inline;" })
      @Html.TextBoxFor(m => m.EndDate, "{0:MM/dd/yyyy}",new { id = "datepicker"})

在视图中"{0:MM/dd/yyyy}" 用于设置正确的日期格式

我用过Jquery Datepicker，代码如下：

<script>
  $(document).ready(function () {
    $("#datepicker").datepicker({
      //dateFormat: "yy-mm-dd",(to display date in required format)
      changeYear: true,
      changeMonth: true,
      yearRange: '1900:2222',
      background: '#000',
      showOn: "button"
    }).css("display", "inline-block")
          .next("button").button({
            icons: { primary: "ui-icon-calendar" },
            label: "cal",
            text: false
          });
  });
</script>

【讨论】：