HTML input[type="date"]的时间范围限制需严格使用min/max属性，且值必须为YYYY-MM-DD格式；动态设置需用setAttribute或dispatchEvent触发重绘；须配合前端校验与服务端二次验证。
HTML 原生 input[type="date"] 的时间范围限制，核心靠 min 和 max 属性，但仅设属性远远不够——格式错一位、赋值方式不对、不校验输入，都会让限制形同虚设。
min/max 必须是严格 YYYY-MM-DD 格式
浏览器只认形如 "2026-09-03" 的字符串。以下写法全部失效（且静默忽略，UI 不变、也不报错）：
-
"2026/09/03"（斜杠分隔） -
"2026-9-3"（月份或日期缺零） -
"2026-09-03T00:00"（带时间部分） -
"03-09-2026"（日月年顺序）
推荐安全生成方式：
- 用
new Date().toISOString().slice(0, 10)（注意：UTC 时间，东八区凌晨可能偏移） - 或手动拼接并补零：
`${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`
动态设置必须触发 UI 重绘
直接写 input.min = "2026-09-03" 在 Safari（尤其 iOS ≤ 15.5）和部分旧 Chrome 中，日历控件不会刷新，用户仍能点选超限日期。
立即学习“前端免费学习笔记（深入）”；
可靠做法只有两种：
- 用
input.setAttribute('min', '2026-09-03')—— 强制 DOM 属性变更 - 或赋值后手动触发更新：
input.dispatchEvent(new Event('input', { bubbles: true }))
若当前 input.value 已超出新 max，浏览器不会自动清空，需显式判断：if (input.value && input.value > input.max) input.value = ''
用户仍可手动输入、粘贴、JS 赋值绕过限制
min/max 只影响日历弹窗和表单提交时的原生提示（且 Safari 完全不提示），对以下行为完全无约束：
- 键盘直接输入
"1990-01-01" - 粘贴任意合法格式日期
- 开发者工具修改 value 或禁用 JS 后提交
必须配合前端实时校验：
- 监听
input事件：用input.setCustomValidity()标记非法状态 - 监听
change或blur事件兜底：检查new Date(input.value)是否越界，越界则清空或重置 - 提交前调用
form.reportValidity()触发统一提示
联动日期（如起止时间）要同步清理 min/max
做“结束日期 ≥ 开始日期”时，只设 end.min = start.value 是危险的：
- 当用户清空开始日期，必须同步执行
end.min = ''或end.removeAttribute('min')，否则end将永远无法选择任何日期 - 当用户手动输入
end早于start，需在change中调用end.setCustomValidity('结束日期不能早于开始日期')并立即end.reportValidity() - 移动端 Safari 的
change触发不稳定，建议加blur事件双保险
服务端必须二次验证所有日期字段——不可信任任何前端传来的值，这是最后也是最关键的防线。
