本文详解如何实现一个轻量、可维护的纯前端年月选择器，重点解决初始化时默认年份错误、当前年份误禁用等常见逻辑缺陷，并提供完整可运行代码与最佳实践建议。
本文详解如何实现一个轻量、可维护的纯前端年月选择器，重点解决初始化时默认年份错误、当前年份误禁用等常见逻辑缺陷，并提供完整可运行代码与最佳实践建议。
在开发表单或日期筛选功能时，标准 <input type="month"> 兼容性有限（如 Safari 旧版本不支持），而引入大型日期库又显得过度。此时，一个简洁、可控、无依赖的自定义年月选择器是理想方案。但实践中常因初始化顺序与状态同步疏忽，导致关键 Bug：例如页面加载后默认显示“2024 年 7 月”而非预期的“2023 年 7 月”，且 2023 年在首次展开年份下拉时被错误禁用。
根本原因在于：初始渲染时，月份下拉框尚未设置为当前月份（默认值为 HTML 中第一个 <option value="1">），而 updateYearOptions() 却先于 updateMonthOptions() 执行。因此，selectedMonth 取值为 1（一月），小于当前月份 7（七月），触发了 year === currentYear && selectedMonth < currentMonth 条件，导致 2023 年被禁用——这显然违背业务逻辑：用户尚未做任何选择，系统不应预设限制。
✅ 正确解法是 严格保证初始化顺序：先调用 updateMonthOptions() 将月份设为当前月，再调用 updateYearOptions() 基于已确定的 selectedMonth 动态生成年份选项。
以下是修复后的完整实现（含关键注释）：
<div id="datepicker">
<label for="month">月份：</label>
<select id="month" onchange="updateYearOptions()">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
<option value="7">七月</option>
<option value="8">八月</option>
<option value="9">九月</option>
<option value="10">十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select>
<label for="year">年份：</label>
<select id="year" onchange="updateSelectedYear()"></select>
<input type="hidden" id="selectedYear" name="selectedYear">
</div>let selectedYear = new Date().getFullYear();
function updateYearOptions() {
const now = new Date();
const currentYear = now.getFullYear();
const currentMonth = now.getMonth() + 1; // 1~12
const selectedMonth = parseInt(document.getElementById('month').value);
const yearSelect = document.getElementById('year');
const maxYear = currentYear + 20;
// 清空选项
yearSelect.innerHTML = '';
// 初始化待选年份（默认为当前年）
let yearToSelect = currentYear;
// 生成年份选项：从 currentYear 到 maxYear
for (let year = currentYear; year <= maxYear; year++) {
const option = document.createElement('option');
option.value = year;
option.textContent = year;
// 禁用规则：仅当选择的是「当前年」且「所选月份 < 当前月份」时，禁用该年
if (year === currentYear && selectedMonth < currentMonth) {
option.disabled = true;
}
// 若默认年份（currentYear）被禁用，则自动 fallback 到下一年（如 2023 被禁 → 选 2024）
if (year === currentYear && option.disabled) {
yearToSelect = currentYear + 1;
}
yearSelect.appendChild(option);
}
// 应用选中值并同步状态
yearSelect.value = yearToSelect;
selectedYear = yearToSelect;
document.getElementById('selectedYear').value = yearToSelect;
}
function updateMonthOptions() {
const monthSelect = document.getElementById('month');
const currentMonth = new Date().getMonth() + 1;
monthSelect.value = currentMonth; // 关键：必须在此处显式设置！
}
// ✅ 初始化顺序至关重要：先设月，再根据月设年
updateMonthOptions();
updateYearOptions();
function updateSelectedYear() {
selectedYear = parseInt(document.getElementById('year').value);
document.getElementById('selectedYear').value = selectedYear;
}⚠️ 注意事项：
- 永远不要依赖 HTML 中 <select> 的默认 value：浏览器可能按 DOM 顺序取第一个 <option>，而非语义上的“当前月”。务必通过 JS 显式赋值。
- 避免全局变量污染：selectedYear 在此示例中为模块级变量；生产环境建议封装为 IIFE 或 ES 模块。
- 增强可访问性：为 <select> 添加 aria-label，并确保键盘导航（Tab/Arrow）流畅。
- 扩展建议：如需支持「最小可选日期」（如不能早于 2020 年 1 月），可在循环中增加 year > minYear || (year === minYear && selectedMonth >= minMonth) 判断。
该方案零依赖、逻辑清晰、修复精准，适用于管理后台、数据筛选、订阅设置等场景。核心思想是：UI 状态初始化必须遵循明确的因果链——月份是年份约束的前提，因此月份必须优先就位。
