HTML原生date输入框需用JavaScript动态设置min/max属性来限制仅选今年：页面加载时获取当前年份，设min为“YYYY-01-01”、max为“YYYY-12-31”，并确保DOM就绪后执行。
HTML原生date输入框如何限制只能选今年
原生 <input type="date"> 不支持直接用 min 或 max 动态绑定“今年1月1日”和“今年12月31日”，因为这些属性只接受静态字符串（如 "2024-01-01"），无法自动随年份变化。硬写死年份会导致明年失效，必须每年手动改代码。
用JavaScript动态设置min/max属性最可靠
在页面加载时用 JS 计算今年的起止日期，并赋给 min 和 max。这是目前兼容性好、无需第三方库的通用解法。
关键点：
-
new Date().getFullYear()获取当前年份，避免时区导致的年份错位 - 起始日期用
YYYY-01-01，结束日期用YYYY-12-31（不是YYYY-12-32） - 必须确保 DOM 已就绪再执行，否则
querySelector找不到元素
const today = new Date();
const year = today.getFullYear();
const dateInput = document.querySelector('input[type="date"]');
if (dateInput) {
dateInput.min = `${year}-01-01`;
dateInput.max = `${year}-12-31`;
}
注意 Safari 和部分旧版浏览器对 min/max 的支持差异
Safari 在 iOS 15.4 之前不支持 min/max 对 date 输入框的视觉限制（即滑动选择器仍可拖出范围），仅做提交校验。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 用户可能仍能选中去年/明年日期，但提交时会触发
ValidityState.rangeOverflow或rangeUnderflow - 需配合
checkValidity()或监听input事件做实时拦截 - 若要求强约束，建议加一层
change事件校验并重置值
不要依赖 valueAsDate 或 setAttribute 设置日期范围
valueAsDate 只读取/设置当前值，不能控制可选范围；setAttribute('min', ...) 虽然可行，但不如直接赋值 min 属性稳定，尤其在 Vue/React 等框架中易被响应式系统覆盖。
真正起作用的是直接操作元素的 min / max 属性（非 HTML attribute），且应放在 DOM 加载完成后执行——这点容易被忽略，尤其是脚本放在 里又没加 defer 时。
