input type="date"默认值必须为ISO 8601格式“YYYY-MM-DD”，如“2024-06-15”；浏览器不自动设当前日期，需JS动态生成并确保月日两位补零，避免时区偏差与非法格式导致显示为空。
input type="date" 默认值必须是 ISO 8601 格式
浏览器原生 <input type="date"> 不会自动填入当前日期，它默认为空；想显示年月日，必须显式设置 value 属性，且格式只能是 "YYYY-MM-DD"（例如 "2024-06-15"）。任何其他格式（如 "2024/06/15"、"15-06-2024" 或带时间的字符串）都会导致输入框显示为空或回退为未选中状态。
用 JavaScript 动态设默认值更可靠
硬编码 value="2024-06-15" 只适用于固定日期。实际项目中通常需要今天或某业务基准日。建议在页面加载后用 JS 设置：
document.addEventListener('DOMContentLoaded', () => {
const dateInput = document.querySelector('input[type="date"]');
if (dateInput && !dateInput.value) {
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, '0');
const dd = String(today.getDate()).padStart(2, '0');
dateInput.value = `${yyyy}-${mm}-${dd}`;
}
});
-
padStart(2, '0')很关键——月份和日期必须两位数，否则如"2024-6-5"会被浏览器拒绝解析 - 务必检查
!dateInput.value，避免覆盖 HTML 中已设的初始值 - 不要用
new Date().toISOString().split('T')[0]，因为时区可能造成日期偏移（比如东八区午夜前调用会得到前一天）
注意 value 属性与用户交互的先后顺序
如果在 HTML 中直接写 <input type="date" value="2024-06-15">，这个值仅作为初始值；一旦用户手动选择日期，value 就会被更新。但有两点容易出错：
- 服务端渲染时若传入非法格式（如空字符串、
null），浏览器会忽略整个value，显示为空——要确保后端输出的是合法YYYY-MM-DD - Vue/React 等框架中，若用
v-model或value={...}绑定，需保证状态值始终符合格式，否则输入框会“失联”（表现为无法选中、清空后不响应） - 某些旧版 Safari 对
value的解析更严格，哪怕多一个空格（"2024-06-15 "）也会失效
移动端键盘与可访问性影响
设了 value 后，iOS 和 Android 原生日期选择器仍能正常唤起，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器会读出完整日期（如“2024年6月15日”），前提是
value合法；非法值会导致读作“空白”或跳过该控件 - 不能靠 CSS 强制显示占位符文字（
placeholder对type="date"无效），想提示格式只能用外部<label>或旁注 - 如果业务允许“可为空”，别给
required，否则用户清空后提交会触发浏览器默认报错，且无法用 JS 清除该校验态
value 的合法性与时效性，不是样式问题；最常被忽略的是时区处理和两位数补零，这两个点一错，整个默认值就静默失效。 
