更新type=date表单字段时如何正确回显数据库存储的日期值
问题原因
<input type="date"> 控件对绑定的value值有严格格式要求,仅支持符合ISO 8601规范的YYYY-MM-DD(年-月-日)格式字符串。
如果数据库中存储的日期是带时分秒的DateTime类型、MM/DD/YYYY/YYYY/MM/DD等非标准格式,浏览器无法正常解析值,就只会显示mm/dd/yyyy默认占位符,无法回显实际存储的日期。
解决方案
- 核心要求:赋值给
input[type=date]的value值,必须是纯YYYY-MM-DD格式的日期字符串,不能带时分秒、不能用斜杠分隔日期段。 - 服务端模板渲染阶段直接格式化(适配你当前的EJS写法):
注意规避toISOString()的UTC时区偏移导致日期差1天的问题,推荐用本地时间手动拼接格式:
<label for="birth_date">Birth Date: </label> <input type="date" class="form-control" name="birth_date" id="birth_date" value="<%= (() => { const d = new Date(patient.birth_date); const year = d.getFullYear(); const month = String(d.getMonth() + 1).padStart(2, '0'); const day = String(d.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; })() %>" />
- 校验方式:页面渲染完成后,右键检查该日期输入框,如果最终生成的HTML里value属性值类似
1995-10-24,就能正常回显;如果是其他格式,就会显示占位符。 - 如果是前端异步加载数据后赋值,也可以复用上面的日期格式化逻辑,拿到接口返回的日期字段后先转成
YYYY-MM-DD格式,再赋值给输入框的value属性即可。
内容的提问来源于stack exchange,提问作者BraulioPortela
相关产品推荐
相关产品推荐

