HTML5 input[type="date"] 用 min 属性限制今天及之后日期，值须为 ISO 8601 格式（如"2024-06-15"），需用 JavaScript 动态生成并手动拼接年月日以避免时区偏差，且服务端必须校验。
HTML5 input[type="date"] 如何限制只能选今天及之后的日期
直接用 min 属性即可，无需 JavaScript。浏览器原生支持，但要注意日期格式必须是 "YYYY-MM-DD" 字符串，且值需动态生成（不能写死）。
-
min的值必须是 ISO 8601 格式，例如"2024-06-15"，写成"15/06/2024"或"2024/06/15"无效 - 页面加载时就要设好
min，否则用户可能在 JS 执行前就选了过去日期 - 服务端仍需校验——前端限制可被绕过
用 JavaScript 动态设置 min 值的正确写法
不能依赖 new Date().toString() 或 .toDateString()，它们不输出标准格式。必须手动拼或用 .toISOString().slice(0,10)（注意时区影响）。
const today = new Date();
// ✅ 安全写法：避免时区偏移导致 min 变成昨天
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, '0');
const dd = String(today.getDate()).padStart(2, '0');
document.getElementById('date-input').min = `${yyyy}-${mm}-${dd}`;
- 用
toISOString()要小心：它转为 UTC 时间，如果你在东八区，new Date().toISOString().slice(0,10)可能在凌晨返回昨天的日期 - 如果后端接收的是本地时间，建议统一用手动拼接方式
- 设完
min后，若value已存在且早于min，浏览器会自动清空该值（部分浏览器）
为什么用户仍可能提交过去日期？常见漏点
即使加了 min，以下情况仍会导致“过去日期”被提交：
- 用户禁用 JS，且 HTML 中没写
min属性（只靠 JS 设置）→ 必须在 HTML 中也写上初始min - 用户修改浏览器开发者工具中的
min值 → 前端无防御能力 - 表单通过非
input[type="date"]提交（比如用隐藏域、AJAX 拼参数）→ 绕过所有原生限制 - 移动端 WebView（如微信内置浏览器）对
min支持不一致，部分老版本忽略该属性
兼容性与 fallback 建议
IE 完全不支持 input[type="date"]，Safari 在 iOS 15.4 之前对 min 支持较弱。若需强保障：
立即学习“前端免费学习笔记（深入）”；
- 服务端必须验证日期 ≥ 当天，用服务端时间而非客户端传的时间戳
- 可加一层 JS 监听
change和blur，即时提示并重置非法值 - 不推荐用第三方日历库“强行统一”，除非项目已重度依赖 jQuery UI 或 Flatpickr
真正容易被忽略的是时区处理和服务器时间基准——前端能拦住大部分误操作，但拦不住有意绕过的请求，也不拦得住跨时区场景下的逻辑错位。
