如何让@Html.EditorFor显示日期（年月日）及时间？

我需要在日期输入框旁添加时间选项，让用户能填写Joined和Left字段的完整日期时间。目前我在模型里给Joined字段设置了DisplayFormat但视图没有生效，相关代码如下：

模型代码 #

namespace TheatreCMS3.Areas.Blog.Models
{
    public class BlogAuthor
    {
        public int BlogAuthorId { get; set; }
        public string Name { get; set; }
        public string Bio { get; set; }
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:yyyy/MM/dd HHmmss}", ApplyFormatInEditMode = true)]
        public DateTime Joined { get; set; }
        [DataType(DataType.Date)]
        public DateTime Left { get; set; }
    }
}

视图代码 #

<div class="flex-container">
            
            <div class="form-group">
                @Html.LabelFor(model => model.Joined, htmlAttributes: new { @class = "control-label col-md-2 general joinedLabel" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Joined, new { htmlAttributes = new { @class = "form-control joined" } })
                    @Html.ValidationMessageFor(model => model.Joined, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Left, htmlAttributes: new { @class = "control-label col-md-2 general" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Left, new { htmlAttributes = new { @class = "form-control left" } })
                    @Html.ValidationMessageFor(model => model.Left, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

核心问题原因 #

你给字段标记了[DataType(DataType.Date)]，这个属性会让ASP.NET MVC渲染出仅支持日期选择的HTML5 input控件（type="date"），这类控件不支持时间输入，所以你的DisplayFormat里的时间格式会被直接忽略。

具体修复步骤 #

1. 修改模型属性
   把[DataType(DataType.Date)]替换为[DataType(DataType.DateTime)]，或者直接移除该属性，同时保留DisplayFormat确保格式正确（建议给时间部分加上冒号分隔，提升可读性）：

   namespace TheatreCMS3.Areas.Blog.Models
   {
       public class BlogAuthor
       {
           public int BlogAuthorId { get; set; }
           public string Name { get; set; }
           public string Bio { get; set; }
           [DataType(DataType.DateTime)]
           [DisplayFormat(DataFormatString = "{0:yyyy/MM/dd HH:mm:ss}", ApplyFormatInEditMode = true)]
           public DateTime Joined { get; set; }
           [DataType(DataType.DateTime)]
           [DisplayFormat(DataFormatString = "{0:yyyy/MM/dd HH:mm:ss}", ApplyFormatInEditMode = true)]
           public DateTime Left { get; set; }
       }
   }
   

2. 优化视图渲染（可选）
   若要让浏览器渲染原生的日期时间选择器，可以直接指定控件类型为datetime-local，提升用户选择体验：

   <div class="flex-container">
       <div class="form-group">
           @Html.LabelFor(model => model.Joined, htmlAttributes: new { @class = "control-label col-md-2 general joinedLabel" })
           <div class="col-md-10">
               @Html.EditorFor(model => model.Joined, new { htmlAttributes = new { @class = "form-control joined", type = "datetime-local" } })
               @Html.ValidationMessageFor(model => model.Joined, "", new { @class = "text-danger" })
           </div>
       </div>
   
       <div class="form-group">
           @Html.LabelFor(model => model.Left, htmlAttributes: new { @class = "control-label col-md-2 general" })
           <div class="col-md-10">
               @Html.EditorFor(model => model.Left, new { htmlAttributes = new { @class = "form-control left", type = "datetime-local" } })
               @Html.ValidationMessageFor(model => model.Left, "", new { @class = "text-danger" })
           </div>
       </div>
   </div>
   

3. 格式匹配验证
   注意datetime-local控件默认预期格式为yyyy-MM-ddTHH:mm:ss，如果需要自定义显示样式，可以通过前端JS调整，或者在后端统一处理格式化逻辑。

内容的提问来源于stack exchange，提问作者TVisi0n