HTML5日期输入框默认值必须为YYYY-MM-DD格式,其他格式如斜杠、中文、缺零或含时间均无效;动态设置时推荐手动拼接年月日以避免时区问题。

HTML5 的默认值怎么设
直接在 value 属性里写符合 YYYY-MM-DD 格式的字符串,浏览器就会显示为默认选中日期。其他格式(比如带时间、中文分隔符、斜杠)都会被忽略或导致输入框为空。
为什么 value="2024/05/20" 或 value="2024年5月20日" 不生效
HTML5 日期输入框只接受严格 ISO 8601 格式:年份 4 位 + 连字符 + 月份 2 位 + 连字符 + 日期 2 位。任何偏差都会使 value 被视为无效,输入框回退到空状态(不显示“– – –”但也不显示日期)。
-
value="2024-5-20"❌(月份/日期没补零) -
value="2024/05/20"❌(用了斜杠) -
value="2024-05-20T00:00"❌(多了时间部分) -
value="2024-05-20"✅(唯一可靠写法)
动态设置默认值时要注意时区和本地化
JavaScript 设置 input.value 时,传入的 Date 对象会被转成用户本地时区的 YYYY-MM-DD 字符串,但 toISOString().slice(0,10) 会强制用 UTC 时间,可能导致前一天——尤其当用户在东八区而服务器时间是 UTC 时。
- 推荐用
new Date().toJSON().slice(0,10)(等价于toISOString().slice(0,10)),但注意它返回的是 UTC 零点对应的本地日期 - 更稳妥的是手动拼接:
`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}` - 服务端渲染时,直接输出已格式化的字符串最安全,避免前端 JS 解析歧义
浏览器兼容性与 fallback 处理
所有现代浏览器都支持 value 设默认值,但旧版 Safari(value="2024-05-20" 渲染为空。如果必须兼容,得加 JS 补偿:
立即学习“前端免费学习笔记(深入)”;
const dateInput = document.querySelector('input[type="date"]');
if (!dateInput.value) {
dateInput.value = '2024-05-20';
}
这个检查要放在 DOM 加载完成后,且最好在 input 已插入文档后再执行——否则某些环境里 value 读出来永远是空字符串。
真正容易被忽略的是:即使设置了默认值,用户点击清空按钮(×)后,再提交表单,该字段可能变成空字符串而非 null 或 undefined,后端得按空字符串处理,不能只判 == null。










