本文详解如何构建一个轻量、无依赖的年月选择器，重点解决初始化时年份显示错误（如默认显示2024而非2023）及当前年份被误禁用的问题，核心在于修正初始化顺序与状态同步逻辑。
本文详解如何构建一个轻量、无依赖的年月选择器，重点解决初始化时年份显示错误（如默认显示2024而非2023）及当前年份被误禁用的问题，核心在于修正初始化顺序与状态同步逻辑。
在开发表单或日期筛选功能时，标准 <input type="month"> 兼容性有限（如 Safari 旧版本不支持），而引入完整日历库又过于冗余。此时，一个仅聚焦“年+月”的自定义选择器是理想方案——简洁、可控、零依赖。但实践中常遇到两个典型问题：页面首次加载时默认年份错误（如当前为 2023 年 7 月，却显示 2024），以及当前年份在特定月份下被错误禁用（如刚打开页面时 July 2023 不可选，但切换再切回却可选）。根本原因在于初始化阶段 month 下拉框未被正确赋值，导致 updateYearOptions() 读取到默认值 1（January），误判 1 < 7 而禁用 2023。
✅ 正确的初始化顺序是关键
原始代码中，updateYearOptions() 在 updateMonthOptions() 之前执行，此时 <select id="month"> 的 value 仍为 HTML 中第一个 <option> 的值（即 1），而非当前月份。因此判断逻辑 selectedMonth < currentMonth 恒为真（1 < 7），导致 2023 年被禁用，且 yearToSelect 被强制设为 2024。
修复方案：先设置月份，再生成年份选项。 仅需调整初始化调用顺序：
// ✅ 正确：先确保 month 已设为当前月，再生成 year 选项 updateMonthOptions(); updateYearOptions();
? 完整可运行代码（含优化）
以下是修复后、生产就绪的完整实现，已增强健壮性与可维护性：
<div id="datepicker">
<label for="month">Month:</label>
<select id="month" onchange="updateYearOptions()">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="year">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) || currentMonth;
const yearSelect = document.getElementById('year');
const maxYear = currentYear + 20;
yearSelect.innerHTML = '';
let yearToSelect = selectedYear;
for (let year = currentYear; year <= maxYear; year++) {
const option = document.createElement('option');
option.value = year;
option.textContent = year;
// 禁用当前年份中「早于当前月份」的选项（如当前是7月，则1–6月不能选2023）
if (year === currentYear && selectedMonth < currentMonth) {
option.disabled = true;
}
// 若预设的 selectedYear 被禁用，则自动 fallback 到下一个可用年份
if (year === selectedYear && option.disabled) {
yearToSelect = year + 1;
}
}
// 批量追加后统一设置 value，避免重复渲染开销
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;
}
yearSelect.appendChild(option);
}
// 确保 yearToSelect 在选项范围内（防止越界）
yearToSelect = Math.min(yearToSelect, maxYear);
yearSelect.value = yearToSelect;
selectedYear = yearToSelect;
document.getElementById('selectedYear').value = selectedYear;
}
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;
}⚠️ 注意事项与最佳实践
- 状态同步一致性：selectedYear 是全局变量，需确保所有更新路径（初始化、月份变更、年份手动选择）都同步更新隐藏域 #selectedYear，避免表单提交时数据错位。
- 边界防护：添加 || currentMonth 防止 parseInt() 返回 NaN；用 Math.min(yearToSelect, maxYear) 防止 yearToSelect 超出范围。
- 性能优化：避免在循环内多次操作 DOM，采用 innerHTML = '' 清空后批量 appendChild，或使用 DocumentFragment（本例为简洁性采用前者）。
- 可访问性增强（建议）：为 <select> 添加 aria-label，并确保标签 <label> 的 for 属性与 id 严格匹配，提升屏幕阅读器兼容性。
- 扩展性提示：如需支持「最小可选日期」（如不得早于 2020 年 3 月），可在 updateYearOptions() 中增加 minYear 和 minMonth 参数，并在循环中叠加判断逻辑。
通过这一微小但关键的初始化顺序调整，即可彻底解决年份默认值错乱与条件禁用失效问题，打造出稳定、专业、易于维护的自定义年月选择器。
