如何将包含日期时间值的ViewData赋值到Razor视图的datetime-local输入框

HTML5 标准中type="datetime-local"的输入框对value属性的格式有强制要求，必须为 yyyy-MM-ddTHH:mm 格式的字符串（属于ISO 8601规范，中间的T必须为大写），如果传入的日期字符串不符合该格式，浏览器会直接判定为非法值，自动清空输入框内容，也就是你看到的赋值不生效的情况。
你在JS中可以正常获取到值，也侧面说明值本身已经传递到前端，只是格式不符合输入框的要求。

方案1：后端存入ViewData前先格式化 #

修改Controller中的赋值逻辑，将日期提前转成符合要求的格式：

// 先做非空校验避免转换报错
if (!string.IsNullOrEmpty(formcollection.fromDate))
{
    ViewData["fromDate"] = Convert.ToDateTime(formcollection.fromDate).ToString("yyyy-MM-ddTHH:mm");
}

cshtml端不需要修改原有代码即可正常显示。

方案2：Razor视图渲染时格式化 #

如果不方便修改后端代码，可以直接在cshtml中对值做格式转换：

<input type="datetime-local" id="fromDate" 
       value="@(ViewData["fromDate"] != null ? Convert.ToDateTime(ViewData["fromDate"]).ToString("yyyy-MM-ddTHH:mm") : string.Empty)" />

方案3：通过JS赋值（适合已经在JS中拿到值的场景） #

因为你已经可以在JS中正常获取到ViewData的值，可以在页面加载完成后处理格式再赋值给输入框：

document.addEventListener('DOMContentLoaded', function(){
    const rawDateStr = '@ViewData["fromDate"]';
    if (!rawDateStr) return;
    // 转换为本地时间格式的符合要求的字符串
    const date = new Date(rawDateStr);
    const padZero = num => num.toString().padStart(2, '0');
    const formattedDate = `${date.getFullYear()}-${padZero(date.getMonth()+1)}-${padZero(date.getDate())}T${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
    document.getElementById('fromDate').value = formattedDate;
});

这里手动拼接本地时间的逻辑是为了避免toISOString()自动转UTC时间导致的时差问题，如果你的业务不需要考虑时区差异，直接用date.toISOString().slice(0,16)也可以。

• 不要使用带斜杠、中文的日期格式，比如yyyy/MM/dd HH:mm、yyyy年MM月dd日等，datetime-local输入框完全不识别这类格式
• 涉及日期转换的逻辑都建议先做非空、合法性校验，避免转换异常报错

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