input[type="date"]的min/max属性仅限制日历面板选择，不拦截键盘输入或粘贴；必须用javascript在change事件中校验value，通过new date()转换比较并清空非法值，同时服务端需重复校验。
input[type="date"] 的 min/max 为什么拦不住手动输入
写了 min="2026-08-11" 和 max="2026-08-18"，用户仍能键盘敲出 2026-09-01 或粘贴乱码——这不是你代码漏了，是浏览器设计如此。原生 input[type="date"] 只在弹出日历面板时强制禁用范围外日期，对 value 的赋值、键盘输入、粘贴等行为完全不拦截。
必须监听 change 事件做 JS 校验
靠 HTML 属性做不到“防止”，只能靠 JS 在用户操作后立刻判断并干预。关键不是拦住输入，而是让非法值无法留存。
-
change比input更可靠：用户点选日历或失焦确认后才触发，避免边输边校验的干扰 - 用
new Date(input.value)转换再比大小，别直接字符串比较（"2026-08-10" 会错） - 校验失败时，清空值比弹 alert 更稳妥：
input.value = ""，否则用户可能反复提交 - 配合
setCustomValidity()触发表单原生阻断，但记得通过时设回空字符串：input.setCustomValidity("")
动态生成 min/max 要避开 setDate() 坑
想限制“今天起 7 天内”，别用 date.setDate(date.getDate() + 7) —— 遇到 1 月 31 日会跳到 3 月 3 日（非闰年 2 月只有 28 天）。正确做法是用 toISOString().slice(0, 10) 锚定本地日历日：
const today = new Date().toISOString().slice(0, 10); const maxDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
这样生成的 today 和 maxDate 是纯字符串，直接赋给 input.min 和 input.max 即可，无跨月风险。
移动端和 Safari 的兼容性现实
你在 Chrome 里看到的灰显禁用，在 iOS Safari 或 Android WebView 里可能完全没反应——这些环境常忽略 min/max，也不触发 :invalid 伪类。所以：
- 别依赖 CSS 样式（如
input:invalid { border: 1px solid red; }）做提示 - 服务端必须重复校验：收到的
date字段可能是任意字符串，得先 parse 再 check 范围 - 若业务强依赖精确日期控制（比如预约系统），直接上
flatpickr这类库更省心，它能真禁用指定日期、显示灰色不可点状态
真正容易被忽略的是时区：用户在北京选 2026-08-11，提交的其实是 UTC 时间 2026-08-10T16:00:00Z。后端如果用 new Date("2026-08-11") 解析，可能误判为 8 月 10 日。最稳的做法是后端直接按字符串截取处理，不转 Date 对象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
