如何在EJS表单中预填充datetime-local类型字段值

嘿，我之前也踩过这个datetime-local的预填充坑！问题根源在于这个输入类型对value的格式有非常严格的要求——必须是YYYY-MM-DDTHH:mm这种精简版的ISO 8601格式，而且不能带时区、毫秒这些额外信息。而数据库返回的日期（不管是Date对象还是字符串）通常不符合这个要求，所以才会无法填充。

具体解决方案 #

你需要先把数据库返回的日期转换成datetime-local认可的格式，再放到表单的value属性里。这里分两种情况处理：

1. 数据库返回的是Date对象（比如从MongoDB/Mongoose、PostgreSQL等拿到的）

直接用toISOString()方法把Date对象转成标准ISO字符串，然后截取前16位（去掉毫秒和时区后缀）：

<div class="form-group">
  <label>Event Date & Time</label>
  <input type="datetime-local" class="form-control" name="eventDateTime" 
         value="<%= new Date(Proposal[0].eventDateTime).toISOString().slice(0, 16) %>">
</div>

为什么要new Date()再包裹一次？防止数据库返回的是字符串类型的日期，先转成Date对象再处理更稳妥。

2. 处理空值情况

如果数据库里的日期字段可能为null或未定义，记得加个判断避免报错：

<div class="form-group">
  <label>Event Date & Time</label>
  <input type="datetime-local" class="form-control" name="eventDateTime" 
         value="<%= Proposal[0].eventDateTime ? new Date(Proposal[0].eventDateTime).toISOString().slice(0, 16) : '' %>">
</div>

排查小技巧 #

如果还是不行，可以在EJS里先打印一下日期的原始值和类型，确认问题：

<% console.log('原始日期值:', Proposal[0].eventDateTime) %>
<% console.log('原始日期类型:', typeof Proposal[0].eventDateTime) %>

要是打印出来是带时区的字符串（比如2024-05-20T14:30:00.000Z），那上面的截取方法肯定能解决；如果是其他格式的字符串，可能需要先手动解析成Date对象再格式化。

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