input[type="date"]的min属性仅限制原生日历选择，无法阻止手动输入、粘贴、js赋值及自动填充；必须结合input和change事件监听，用new date()校验并重置非法值。
input[type="date"] 的 min 属性根本拦不住手动输入——用户粘贴、键盘敲击、JS 赋值，全都不受约束。靠 HTML 属性本身做不到“防止”，必须用 JS 拦截 + 校验 + 重置。
为什么 min 对手动输入完全失效
浏览器只在原生日历弹窗里禁用超范围日期（比如灰掉昨天），但不会阻止：
• 用户直接键入 2025-12-01（哪怕今天是 2026-08-11）
• 粘贴非法日期字符串
• 执行 el.value = '2020-01-01'
• 表单自动填充（Autofill）带出历史旧日期
部分浏览器（如 Safari）发现初始 value 超 min 会清空输入框，Chrome 则留着但标记为 :invalid —— 这个状态不触发任何 UI 提示，用户毫无感知。
input 和 change 事件必须都监听
只监听 input 会漏掉粘贴后未失焦就提交的情况；只监听 change 会错过用户输完立刻点提交按钮的瞬间。两个事件要配合用：
-
input：实时响应每次按键/粘贴，立即校验并调用setCustomValidity()触发原生错误提示（但不阻断输入） -
change：作为兜底，提交前强制重置非法值（比如清空或设为min） - 不要用
blur：用户可能跳过失焦直接点提交按钮
校验逻辑必须用 new Date(value) 而不是字符串比较
日期字符串按字典序比（如 '2025-12-31' > '2026-01-01'）会出错，因为 '2' > '0'。正确做法是转成时间戳比大小：
const minDate = new Date(document.querySelector('input[type="date"]').min);
const selected = new Date(el.value);
if (isNaN(selected.getTime()) || selected
<p>注意：<br>• <code>new Date('')</code> 返回 <code>Invalid Date</code>，<code>getTime()</code> 是 <code>NaN</code>，必须先判 <code>isNaN</code><br>• <code>el.min</code> 是字符串，要转一次 <code>Date</code> 才能比大小<br>• 不要用 <code>toISOString().slice(0,10)</code> 再比字符串——时区不同会导致本地时间 vs UTC 时间错位</p>
<h3>移动端 WebView 和旧版 Safari 是最大雷区</h3>
<p>iOS 14 以前的 WKWebView、部分安卓定制浏览器，对 <code>min/max</code> 的日历渲染支持极差，甚至完全忽略。此时连原生面板里的禁用都失效，更别说手动输入了。应对策略只有：</p>
- JS 校验逻辑必须无条件执行，不能依赖
el.min是否存在 - 服务端必须二次校验——前端限制纯属体验优化，不是安全防线
- 如果业务强依赖精准日期控制（如预约系统），建议降级用 Flatpickr 等可控组件，它能在日历面板里真正禁用过去日期
真正可靠的边界永远在服务端，前端所有限制只是减少无效提交和提升反馈速度。用户绕过 JS 的成本极低，别把它当防线用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
