ASP.NET Core 6 MVC中datetime-local输入框日期格式适配问题

核心原因 #

HTML的datetime-local输入框仅识别ISO 8601标准格式，即yyyy-MM-ddTHH:mm:ss（或简化为yyyy-MM-ddTHH:mm），示例格式如2024-05-20T14:30:00。你当前模型返回的日.月.年 00:00:00格式不符合该标准，因此无法被输入框识别填充。

解决方案 #

方法1：视图层直接格式化输出

在视图中对日期值进行格式化，同时注意处理可空日期类型的场景：

<!-- 针对非可空DateTime类型 -->
<input type="datetime-local" value="@Model.Date.ToString("yyyy-MM-ddTHH:mm:ss")" class="inputwidth">

<!-- 针对可空DateTime?类型 -->
<input type="datetime-local" value="@(Model.Date.HasValue ? Model.Date.Value.ToString("yyyy-MM-ddTHH:mm:ss") : "")" class="inputwidth">

方法2：模型层添加格式化特性

在模型的日期字段上添加DisplayFormat特性，让框架自动处理格式转换：

public class YourModel
{
    // 标注格式化规则，ApplyFormatInEditMode确保编辑模式下生效
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-ddTHH:mm:ss}", ApplyFormatInEditMode = true)]
    public DateTime? Date { get; set; } // 根据实际业务选择DateTime或DateTime?类型
}

随后在视图中使用EditorFor辅助方法生成输入框：

@Html.EditorFor(m => m.Date, new { htmlAttributes = new { @class = "inputwidth" } })

额外注意事项 #

• 如果你的日期是UTC时间，需要先转换为本地时间再格式化，示例代码：

  @Model.Date.ToLocalTime().ToString("yyyy-MM-ddTHH:mm:ss")
  

• 确保日期值不为空，否则输入框会保持空白状态。

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