min/max仅在原生日历控件中生效且格式必须为yyyy-mm-dd，无法阻止手动输入非法值，safari及移动端支持弱，需配合js实时校验与降级方案。
直接用 min 和 max 属性就能限制日期选择范围，但浏览器默认行为不一致、用户仍可手动输入非法值、移动端支持弱——这些才是实际项目里真正要处理的问题。
为什么 min 和 max 有时不起作用？
常见现象：设了 min="2024-01-01"，但用户在 Chrome 里点开日历仍能选前一天；或在 Safari 中完全不显示限制；甚至在 Firefox 中输入框里直接手输 2023-12-31 也能提交。
-
min/max是“建议性约束”，不是强制校验，只影响原生日历控件的可选范围（且仅限部分浏览器） - Safari 对
input[type="date"]的min/max支持滞后，iOS 16.4 之前基本不生效 - 用户绕过日历、直接键盘输入时，浏览器不会拦截非法值，
value仍会被设为无效日期字符串（如"2023-12-31"） - 注意格式必须是
YYYY-MM-DD，写成"2024/01/01"或"01/01/2024"会导致属性被忽略
如何让限制真正生效？
靠 HTML 属性不够，得配合 JavaScript 校验 + 用户反馈。关键不是“阻止输入”，而是“及时提示并恢复合法状态”。
- 监听
input和change事件，每次值变更后立刻校验 - 用
new Date(value)判断是否为有效日期，再比对min/max值（注意：无效字符串会得到Invalid Date） - 若超出范围，重置
value并调用setCustomValidity()触发原生提示（如input.setCustomValidity("日期不能早于 2024-01-01")） - 别用
preventDefault()拦截输入——它会让光标错乱、粘贴失效，体验极差
const dateInput = document.querySelector('input[type="date"]');
const minDate = new Date(dateInput.min);
const maxDate = new Date(dateInput.max);
dateInput.addEventListener('input', () => {
const valueAsDate = new Date(dateInput.value);
if (isNaN(valueAsDate.getTime()) || valueAsDate maxDate) {
dateInput.setCustomValidity('请选择有效日期范围内的日期');
} else {
dateInput.setCustomValidity('');
}
});
移动端兼容性怎么办？
iOS Safari 的原生日历控件不尊重 min/max，Android 各厂商 WebView 行为也不统一。这时候不能赌原生能力。
- 明确检测是否为 iOS 或低版本 Android：
/iPad|iPhone|iPod/.test(navigator.userAgent) - 对这些环境，主动禁用原生控件：
input.type = 'text'，再用轻量级 JS 日历库（如 flatpickr、vanillajs-datepicker）接管 - JS 日历库需显式传入
minDate和maxDate选项，且多数支持禁用不可选日期（不只是灰掉，而是点击无响应） - 记得给文本框加
inputmode="numeric"和pattern="\d{4}-\d{2}-\d{2}"，辅助软键盘和基础格式提示
真正麻烦的不是设 min 和 max，而是得同时应付浏览器差异、手动输入、移动端降级、无障碍访问——这些细节堆起来，才构成一个可用的日期范围限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
