如何让datetime-local类型Html.TextBox显示预设DateTime值而非模板

问题描述 #

编辑页中使用@Html.TextBox生成的datetime-local类型输入框，当前仅显示模板占位符（如dd/mm/yyyy --:-- --），无法正常渲染ViewBag中传递的EffectiveDate预设值，但需要保留用户编辑日期时间的功能。

当前前端代码：

@Html.TextBox("EffectiveDate", (DateTime)ViewBag.EffectiveDate, new {  @type="datetime-local", @class="form-control"})

后端设置ViewData的代码：

var pacEffectiveDate = await _context.LocationPac.Where(l => l.LocationID == id).Select(l => l.EffectiveDate).FirstOrDefaultAsync();
ViewData["EffectiveDate"] = pacEffectiveDate;

问题原因 #

datetime-local类型的输入框对值的格式有严格要求，必须是ISO 8601标准的字符串格式（示例：2024-05-20T14:30）。直接传入DateTime对象时，MVC默认渲染的格式不符合该要求，导致输入框无法识别值，进而显示默认占位符。

解决方案 #

提供两种可行的解决方式，任选其一即可：

方式一：前端格式化DateTime值

修改@Html.TextBox的参数，将DateTime对象转换为符合要求的字符串格式，同时处理null值避免异常：

@Html.TextBox("EffectiveDate", 
    ViewBag.EffectiveDate != null ? ((DateTime)ViewBag.EffectiveDate).ToString("yyyy-MM-ddTHH:mm") : "", 
    new { @type = "datetime-local", @class = "form-control" })

方式二：后端提前格式化存入ViewData

在后端将DateTime转换为指定格式的字符串后，再存入ViewData，前端可保持原有写法：

var pacEffectiveDate = await _context.LocationPac
    .Where(l => l.LocationID == id)
    .Select(l => l.EffectiveDate)
    .FirstOrDefaultAsync();

// 转换为datetime-local兼容的格式，同时处理null情况
ViewData["EffectiveDate"] = pacEffectiveDate.HasValue 
    ? pacEffectiveDate.Value.ToString("yyyy-MM-ddTHH:mm") 
    : string.Empty;

前端代码（无需修改或简化）：

@Html.TextBox("EffectiveDate", ViewBag.EffectiveDate, new { @type = "datetime-local", @class = "form-control" })

注意事项 #

• 必须处理pacEffectiveDate为null的情况，避免出现空引用异常。
• 如果你的DateTime对象带时区信息（如DateTimeKind.Utc），建议先转换为本地时间再格式化，避免显示的时间与预期不符。

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