min/max 必须为严格 YYYY-MM-DD 格式字符串，如“2026-08-11”，任何格式偏差（缺零、斜杠、带时间/时区）均导致属性静默失效；动态设置需用 setAttribute 或强制重绘；其仅约束原生日历面板，不拦截手动输入或 JS 赋值，须配合 JS 实时校验与联动逻辑。
min/max 必须是严格格式的 YYYY-MM-DD 字符串
浏览器只认形如 "2026-08-11" 的字符串，任何偏差都会导致属性静默失效：少补零（"2026-8-11"）、斜杠分隔（"2026/08/11"）、带时间（"2026-08-11T00:00"）或时区（"2026-08-11Z"）全都不行。
常见翻车点：
-
new Date().toISOString()直接赋值 → 得到"2026-08-11T02:24:00.000Z"，必须用.slice(0, 10)截断 - 手拼字符串写成
"2026-8-11"→ 字符串比较时"2026-8-11" > "2026-08-11"成立，范围逻辑反转 - 后端返回
"2026/08/11"或"11-08-2026"→ 浏览器当没看见，UI 和校验均无反应
动态设置 min/max 不能只写 input.min = "2026-08-11"
在 Safari（尤其 iOS ≤ 15.5）和部分旧版 Chrome 中，直接赋值 input.min 或 input.max 属性不会刷新日历面板 UI，用户仍能点选超限日期。
可靠做法：
- 用
input.setAttribute('min', '2026-08-11')替代直接赋值 - 或手动触发重绘：赋值后调用
input.style.display = 'none'; input.offsetHeight; input.style.display = ''; - 移动端 WebView（尤其旧版 iOS）可能完全不响应，需降级为 JS 校验兜底
min/max 只约束原生日历面板，不拦手动输入和 JS 赋值
写了 min="2026-08-01" max="2026-08-31"，用户依然可以：
- 手动键入
"2026-09-01"并提交 - 用 JS 执行
input.value = "2026-09-01" - 粘贴非法日期字符串
真正生效的场景仅限：用户点击输入框唤起原生日历面板时，面板内禁用超限日期。所以必须配合 JS 实时校验：
- 监听
input和change事件 - 用
new Date(input.value)转为日期对象比对，而非字符串比较 - 调用
input.setCustomValidity()配合form.reportValidity()阻断提交
两个 date 输入框之间做联动（如开始/结束日期）不能靠 min/max 单向设
start 设了 min、end 设了 max，无法阻止用户选 start="2026-08-30" + end="2026-08-01" 这种倒置组合。
必须基于值依赖实时联动：
-
start的change事件中，设end.min = start.value -
end的change事件中，检查end.value ，不合法则清空或重置 - 注意：设
end.min后，Safari 可能不刷新日历 UI，仍需加 JS 校验
日期范围限制的坑不在写法，而在“你以为它拦住了，其实没拦住”——尤其是手动输入、JS 赋值、跨浏览器 UI 不一致这三点，漏掉任何一个，约束就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
