直接在 HTML 中设置 min 属性为本地化 YYYY-MM-DD 格式日期，如 min="2024-05-20"，并配合服务端校验确保日期 ≥ 服务端当前日期。
如何用 min 属性限制 <input type="date"> 只能选今天及以后
直接在 HTML 中设置 min 属性是最轻量、最可靠的方式。浏览器原生支持，无需 JS 就能阻止用户选择过去日期（包括日历控件里灰掉不可选）。
关键点是：值必须是 YYYY-MM-DD 格式字符串，且不能带时间或时区信息。
-
min值需动态生成——静态写死（比如min="2024-01-01"）无法应对“今天以后”这个动态要求 - 推荐在页面加载时用 JS 设置：
document.getElementById('date-input').min = new Date().toISOString().split('T')[0]; - 注意：
new Date().toISOString()返回的是 UTC 时间，如果用户本地时区晚于 UTC（如中国+8），可能导致min比本地“今天”早一天；更稳妥的做法是手动拼接本地日期：const d = new Date();<br>const today = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;<br>document.getElementById('date-input').min = today;
为什么只设 min 不够？后端校验必不可少
前端限制纯属“友好提示”，用户可以禁用 JS、直接改 DOM、或用 curl/postman 绕过所有限制。实际提交的日期仍可能非法。
- 服务端收到
date字段后，必须重新解析并比较是否 ≥ 当前日期（注意：服务端时间与客户端可能不同，应以服务端系统时间为基准） - 例如 Node.js（Express）中：
const inputDate = new Date(req.body.date);<br>const today = new Date();<br>today.setHours(0, 0, 0, 0); // 清除时分秒，避免跨天误判<br>if (inputDate < today) { /* 拒绝请求 */ } - 数据库层面（如 MySQL）也可加 CHECK 约束，但首次插入时若数据已违规，约束会直接报错，不如应用层提前拦截友好
常见错误现象和坑
用户反馈“明明设了 min，还是能选昨天”——大概率是以下原因：
立即学习“前端免费学习笔记（深入）”；
- JS 执行时机太晚：DOM 未加载完成就尝试获取元素，
getElementById返回null，赋值失败。务必确保脚本在<input>后执行，或用DOMContentLoaded包裹 - 时区混淆：用
toISOString().split('T')[0]在北京时间下午三点后，会返回明天的日期字符串（因 UTC 已进入下一日），导致min被设为“明天”，今天反而不可选 - 表单重置后
min丢失：如果用户点击<input type="reset">或调用form.reset()，所有动态设置的属性（包括min）都会被清空，需监听reset事件重新设置 - 移动端兼容性：iOS Safari 对
min支持良好，但部分 Android 原生浏览器（尤其旧版本）可能忽略该属性，仅靠前端无法 100% 阻止非法输入
要不要用 JS 实时校验 + 提示？
有必要，但定位要准：它不是替代 min，而是补充体验和兜底。
- 监听
change或input事件，检查用户手动输入的值（比如粘贴或键盘输入）是否合法：input.addEventListener('change', () => {<br> if (new Date(input.value) < today) {<br> alert('请选择今天或之后的日期');<br> input.value = ''; // 清空非法值<br> }<br>}); - 注意：不要用
blur，因为用户可能还没输完（如只输到年份）就移出焦点，容易误判 - 对屏幕阅读器用户，建议同时设置
aria-invalid="true"和关联错误消息aria-describedby，否则仅视觉提示不满足无障碍要求
实际中最容易被忽略的是服务端校验的严格性——哪怕前端一切正常，只要后端没做日期比对，攻击者就能绕过所有限制。另外，min 的值一旦设错（比如用了 UTC 导致偏差），用户当天第一件事就是发现日期选不了，排查起来反而比加后端逻辑更耗时。
