MySQL+JS+Handlebars项目中编辑表单DATE输入框无法回显数据库值

问题核心在于input[type="date"]要求value必须是YYYY-MM-DD格式的纯字符串，而从MySQL查询返回的日期可能是Date对象，Handlebars直接渲染会输出带时区的完整ISO字符串（比如2024-05-20T00:00:00.000Z），这种格式不被日期输入框识别，导致回显为空。

下面提供两种可行的解决方法：

方法1：在路由中预处理日期格式 #

在获取数据库数据后，将日期对象转换为YYYY-MM-DD格式的字符串再传递给模板：

router.get('/edit/:id', async(req,res)=>{    
     const { id }=req.params;     
     const casos = await pool.query('SELECT * FROM casos WHERE id=?',[id]);
     // 转换日期格式为YYYY-MM-DD
     if (casos[0].fechacirugia) {
       casos[0].fechacirugia = new Date(casos[0].fechacirugia).toISOString().split('T')[0];
     }
     res.render('casos/edit',{casos:casos[0]}); 
});

模板代码保持不变即可：

<div class="col-md-4">  
  <label>Fecha de cirugía</label>  
   <input type="date" value="{{casos.fechacirugia}}" class="form-control" name="fechacirugia"/>  
</div>

方法2：使用Handlebars Helper处理日期 #

注册一个Handlebars辅助函数，在模板中直接转换日期格式：

1. 在项目入口文件（如app.js）中注册Helper：

const handlebars = require('handlebars');
// 注册日期格式化Helper
handlebars.registerHelper('formatDate', function(date) {
  if (!date) return '';
  return new Date(date).toISOString().split('T')[0];
});

2. 修改模板代码，调用Helper：

<div class="col-md-4">  
  <label>Fecha de cirugía</label>  
   <input type="date" value="{{formatDate casos.fechacirugia}}" class="form-control" name="fechacirugia"/>  
</div>

额外检查点 #

• 确认数据库中fechacirugia字段确实有非空值，避免因数据为空导致回显失败。
• 若使用的MySQL驱动返回的是字符串格式（YYYY-MM-DD），可直接使用；若返回Date对象，必须做格式转换。

内容的提问来源于stack exchange，提问作者Sebastián medina