html input[type="date"] 的 min/max 仅限制原生日历可选日期，无法阻止手动输入、js赋值或粘贴超限值，必须配合js校验与服务端验证；其格式严格要求yyyy-mm-dd，错误则静默失效，且动态设置需用setattribute或触发重绘。
HTML input[type="date"] 的 min 和 max 能限制日历面板可点日期，但**不能阻止手动输入、JS赋值或粘贴超限值**——必须配合 JS 校验 + 服务端二次验证才算真正生效。
min/max 只在原生日历里起作用，且格式错一位就失效
浏览器只在用户点击唤起的日历弹窗中禁用范围外日期，其余一切行为都不拦。而且它对格式极其敏感：
-
min="2024-08-11"✅ 正确（必须是 4 位年 + 2 位月 + 2 位日，短横线分隔） -
min="2024-8-11"❌ 被静默忽略（月份/日期缺零） -
min="2024/08/11"❌ 浏览器当无效值丢弃 -
min="2024-08-11T00:00"❌ 带时间部分直接失效
一旦格式错误，checkValidity() 会返回 false，但 UI 不报错、日历不灰、用户照常选——你根本不知道它没生效。
动态设置 min/max 必须用 setAttribute 或强制重绘
直接写 input.min = "2026-08-11" 在 Safari（尤其 iOS ≤ 15.5）和部分旧 Chrome 中，日历 UI 不刷新，用户仍能点选超限日期：
- 可靠写法：
input.setAttribute('min', '2026-08-11') - 或赋值后手动触发重绘：
input.dispatchEvent(new Event('input', { bubbles: true })) - 如果当前
value已超出新max，浏览器不会自动清空，得显式判断：if (input.value && input.value > input.max) input.value = ''
联动起止日期必须同步清空 min/max
比如“结束日期 ≥ 开始日期”，只设 end.min = start.value 不够：
- 当用户清空
start时，必须同步执行end.removeAttribute('min')或end.min = ''，否则end永远被卡住 - 用户可能手动输入
end早于start，需监听change并用end.setCustomValidity()+end.reportValidity()实时拦截 - 移动端 Safari 的
change触发不稳定，建议加blur事件兜底校验
JS 校验才是真约束，别信表单提交时的浏览器提示
Chrome/Firefox 提交时会拦并提示 “Please select a value that is no earlier than …”，但 Safari 完全不触发，且所有浏览器都允许粘贴、开发者工具改值、JS 直接赋值——这些都绕过 min/max：
- 监听
input事件做实时检查：new Date(input.value) → <code>input.setCustomValidity('日期太早') - 监听
change做兜底重置：if (input.value && new Date(input.value) > maxDate) input.value = '' -
setCustomValidity()只影响表单提交，不影响输入框本身；要即时反馈，得自己加 DOM 提示
真正容易被忽略的是：时区处理。用 new Date().toISOString().slice(0,10) 比 getFullYear()+padStart() 更稳——前者锚定 UTC 日历日，后者在本地时区跨 midnight 时可能出错（比如 UTC+9 用户凌晨 00:30，getMonth() 还是上月）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
