firefox 中 input[type="date"] 的键盘输入不可也不该禁用，因其是唯一默认支持键盘操作的主流浏览器，符合 wcag 2.1 可访问性要求；应通过 change 事件校验、setcustomvalidity 报错、min/max 辅助限制，并注意时区与后端校验一致性。
Firefox 中 input[type="date"] 的键盘输入无法被真正禁止
不能也不该禁用。Firefox 是唯一默认允许用户用键盘（↑/↓/Tab/Enter）操作原生日期输入框的主流浏览器，这是 WCAG 2.1 要求的键盘可访问性保障。强行屏蔽会直接导致屏幕阅读器用户、键盘依赖者无法选择日期。
常见错误做法包括：
-
readonly：日历图标变灰、点击无响应，彻底破坏功能 -
onKeyDown={e => e.preventDefault()}：在 Firefox 中无效，其对 date 输入的事件捕获机制特殊 -
disabled：字段不参与表单提交，且视觉不可用，违背业务需求
应该用 change 事件做合法值拦截，而非阻止输入
用户输完或点选后，才判断是否有效——这才是合理时机。比 input 事件更稳，避免边输边校验（如输到 "2026-" 就报错）。
关键操作：
- 用
new Date(e.target.value)转成日期对象再比较，别直接字符串比（"2026-08-2" > "2026-08-10"会返回true） - 范围外时调用
e.target.setCustomValidity("提示文字")+e.target.reportValidity()，触发语义化错误反馈 - 校验通过后必须重置：
e.target.setCustomValidity("")，否则后续提交永远失败 - 非法值建议清空：
e.target.value = ""，比弹 alert 或留着乱码更可控
min 和 max 属性只管日历面板，不管键盘输入
写了 min="2026-10-20" 和 max="2026-10-27"，用户照样能敲出 2026-12-01 或粘贴 xyz——这不是你漏写 JS，是浏览器设计如此。
它们的作用仅限于：
- 禁用日历弹窗中范围外的日期按钮（Chrome/Firefox 支持，Safari 基本不响应）
- 限制上下键导航的边界（Firefox 有效，Chrome 失焦时可能自动“掰回”，但不统一）
- 不影响
value的任何赋值行为，包括 JS 修改、粘贴、键盘输入
动态设置时务必用标准格式字符串：input.max = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10)，别用 setDate()，否则跨月会错（如 1 月 31 日加 7 天变成 3 月 3 日）。
真正容易被忽略的是时区和后端校验
用户在北京选 2026-10-20，浏览器提交的是 UTC 时间 "2026-10-19T16:00:00Z"；后端若用 new Date("2026-10-20") 解析，可能落在 10 月 19 日——结果范围校验就失效了。
最稳妥的做法：
- 后端收到字段后，先用正则
/^\d{4}-\d{2}-\d{2}$/检查格式，再截取年月日字符串比对，不转Date对象 - 前后端共用同一套日期范围逻辑，比如都基于东八区本地日历日计算
- 如果业务强依赖 UI 级禁用（如预约系统不允许点灰色日期），别硬扛原生控件，直接上
flatpickr或类似库
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
