原生 <input type="date"> 默认禁用鼠标滚轮是规范行为，需通过 wheel 事件拦截并手动增减天数实现，但 Firefox 需捕获阶段监听、Safari 完全不支持；更稳妥方案是改用 type="text" 配合 flatpickr 等库。
Chrome/Firefox 中 <input type="date"> 默认不响应鼠标滚轮
浏览器原生日期输入框在绝大多数情况下会忽略鼠标滚轮事件——这不是 bug，而是规范行为。W3C 明确要求该控件应通过点击弹出日历或键盘（↑/↓）调整，滚轮被有意禁用以避免误操作。所以直接写 onwheel 或 addEventListener('wheel', ...) 不会生效，除非你先阻止默认行为并手动接管逻辑。
用 event.preventDefault() 拦截滚轮并映射到日期增减
核心思路是：监听 wheel 事件 → 阻止默认滚动 → 根据 deltaY 正负判断方向 → 解析当前值为 Date 对象 → 增减天数 → 再格式化回 YYYY-MM-DD 字符串赋值给 input.value。注意必须确保输入框已有合法初始值，否则 new Date(input.value) 可能返回 Invalid Date。
实操建议：
- 只在
focus状态下启用滚轮监听，避免页面其他区域滚动时误触发 - 用
input.valueAsDate替代字符串解析，更可靠（但 IE 不支持） - 增减单位建议用“天”而非“月”，因月份天数不固定，
setMonth()易越界（如 1 月 31 日 +1 月 → 3 月 3 日） - 示例代码片段：
input.addEventListener('wheel', e => { if (!document.activeElement?.matches('input[type="date"]')) return; e.preventDefault(); const date = input.valueAsDate || new Date(); const step = e.deltaY > 0 ? 1 : -1; date.setDate(date.getDate() + step); input.valueAsDate = date; });
兼容性与副作用必须提前处理
Firefox 会阻止对 type="date" 的 wheel 事件监听（连 addEventListener 都不触发），必须改用 input.addEventListener('wheel', ..., true) 捕获阶段注册；Safari 则完全禁用该事件，无法绕过。另外，滚轮调整后焦点可能丢失，需手动 input.focus()；如果用户快速滚动，还需防抖（setTimeout 清除前次定时器），否则日期跳变过快。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 滚动后日期不变：未调用
e.preventDefault()，浏览器仍尝试滚动页面 - 选中 2024-02-29 后滚轮+1 → 变成 2024-03-01（正确），但若+30天则变成 2024-03-29（非预期的“加一个月”）
- 移动端触屏无滚轮，此逻辑完全不生效，不能替代日历面板
更稳妥的替代方案：用 <input type="text"> + 自定义日期库
如果项目需要稳定支持滚轮、跨浏览器一致、且允许月/年粒度调整，建议放弃原生 type="date"，改用 type="text" 配合轻量库如 flatpickr 或 vanillajs-datepicker。它们默认支持滚轮，并提供 onChange、onOpen 等钩子，还能统一处理时区、格式化和禁用日期等需求。原生控件的无障碍支持虽好，但定制性代价太高。
关键权衡点：
- 原生
type="date"：语义正确、无需额外 JS、自动适配系统日历，但滚轮不可控 - 自定义输入框：功能可控、视觉可定制、滚轮/键盘/点击行为统一，但需维护样式与 a11y 属性（如
role="application"） - 别试图 patch 所有浏览器——Safari 和旧版 Firefox 就是不让你滚
min/max 属性，而不是让用户靠滚轮猜。 
