原生HTML无year类型输入框，推荐用下拉或实现年份选择；前者兼容性好、无JS依赖，后者节省空间但需设min/max约束；禁用date类型截取年份，因其存在兼容性、UX及语义问题。
原生 HTML 没有 <input type="year">，所谓“年选择器”必须靠组合实现——要么用 <select></select> 手动枚举年份，要么用 <input type="number"> + 限制范围，再辅以 JS 增强体验。强行套用日期选择器（如 <input type="date">）再截取年份，反而增加兼容性和 UX 风险。
用 <select></select> 构建静态年份下拉菜单
最稳妥、无 JS 依赖、全浏览器兼容的方案。适合年份范围固定（如出生年份、财报年份）的场景。
关键点在于：年份列表要合理裁剪，避免过长；默认值需明确；value 必须为纯数字字符串，不要带“年”字。
- 起止年份建议按业务定：出生年份常用
1920–2025，系统年份可用2020–2030 - 用
selected标记默认项，或 JS 动态设select.value - 别写
<option value="2025年">2025年</option>——value含非数字会导致表单提交/JS 解析失败
<select name="year"> <option value="" disabled selected>请选择年份</option> <option value="2025">2025</option> <option value="2024">2024</option> <option value="2023">2023</option> </select>
用 <input type="number"> 实现可输入+微调的年份框
比下拉更节省空间，支持键盘输入和上下箭头微调，语义清晰，无障碍友好。但需手动加约束，否则用户可能输错（如负数、超长数字）。
立即学习“前端免费学习笔记（深入）”；
核心是三个属性：min、max、step。不设 min/max 就等于没防护。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
min="2020"和max="2030"能阻止非法值提交，但 Safari 仍允许手动输入越界值（需 JS 补校验） -
step="1"确保箭头每次增减 1 年（默认就是 1，可省略） - 加
pattern="\d{4}"+title="请输入4位年份"可提示格式，但不阻止提交
<input type="number" name="year" min="2020" max="2030" value="2025" aria-label="年份">
为什么别用 <input type="date"> 截年份？
表面看它带年份选择，实际问题不少：iOS Safari 默认只显示年月（不显示日），Android 厂商定制键盘可能无年份滚动；获取值时是 "2025-01-01" 字符串，需额外切分；用户可能误选错误日期导致年份偏差。
更麻烦的是，如果只要年份，却强制用户选完整日期，违背最小操作原则。
- 若后端只要年份字段，传
2025-01-01还得在服务端或 JS 里date.split("-")[0]，多一层转换 - 用
<input type="date">且隐藏日/月（如 CSS 遮盖）属于 hack，破坏可访问性，屏幕阅读器会读出完整日期 - Chrome 某些版本对
min/max的年份限制不生效，仅限制日期面板可见范围，不拦输入
JS 增强：动态生成年份选项 + 实时校验
当起止年份需根据当前年动态计算（如“近10年”、“未来5年”），就得用 JS。重点不是生成逻辑，而是如何不破坏降级体验。
原则：HTML 里先写一个基础 <select></select> 或 <input>，JS 加载后再填充或增强。避免 JS 失败时页面空白。
- 用
new Date().getFullYear()获取当前年，再用for循环生成<option></option>，比拼接字符串更安全 - 对
type="number"绑定input事件做实时校验：超出min/max就重置为最近合法值 - 别忘了给增强后的控件加
aria-invalid和错误消息aria-describedby，满足 WCAG
const yearSelect = document.querySelector('select[name="year"]');
const thisYear = new Date().getFullYear();
for (let y = thisYear - 5; y <= thisYear + 5; y++) {
const opt = document.createElement('option');
opt.value = String(y);
opt.textContent = y;
yearSelect.appendChild(opt);
}真正难的不是生成年份，而是判断这个“年”在业务中是否有效——比如财务系统不允许选未结账年份，HR 系统禁止选未来入职年。这些规则必须在前端校验之外，由后端最终确认。前端年份控件，只是第一道轻量过滤。
