本文介绍如何用纯 javascript 实现一个轻量、可定制的月份年份选择器，重点解决初始化时年份显示错误（如默认显示 2024 而非当前年 2023）及当前年被误禁用的问题，并提供健壮的联动逻辑与完整可运行代码。
在构建自定义月份年份选择器时，核心挑战在于初始化顺序与动态状态同步。原始代码中，updateYearOptions() 在 updateMonthOptions() 之前执行，导致页面加载时 <select id="month"> 的值仍为默认的 1（January），而当前月份是 7（July）。此时判断 selectedMonth < currentMonth 成立（1 < 7），错误地禁用了 2023 年——这正是问题根源。
✅ 正确解法：先设置月份，再生成年份选项
只需将初始化调用顺序调整为：
updateMonthOptions(); // 先将 month select 设为当前月（如 July → 7） updateYearOptions(); // 再基于已正确的 selectedMonth 计算年份可用性
这样，updateYearOptions() 中读取到的 selectedMonth 就是真实的当前月份（7），2023 不会被误禁用，且 selectedYear 初始值自然设为 2023。
以下是优化后的完整实现（含关键注释与增强健壮性）：
<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;
// 当前年仅在所选月份 < 当前月时禁用（即：不能选“过去”的年月组合）
if (year === currentYear && selectedMonth < currentMonth) {
option.disabled = true;
}
// 若预设的 selectedYear 被禁用，则自动 fallback 到下一个可用年份
if (year === selectedYear && option.disabled) {
yearToSelect = year + 1;
}
}
// 确保 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) || new Date().getFullYear();
document.getElementById('selectedYear').value = selectedYear;
}? 注意事项与最佳实践：
- 始终校验输入值：parseInt(...) 后应检查 NaN，此处通过 || currentMonth / || currentYear 提供安全兜底；
- 避免全局污染：可将 selectedYear 封装进 IIFE 或模块作用域；
- 可访问性增强：为 <select> 添加 aria-label，并确保键盘导航支持；
- 响应式适配：在移动端建议添加 touchstart 延迟或使用原生 input[type="month"] 作为降级方案（但注意其不支持自定义样式）；
- 扩展性提示：如需支持「最小可选日期」，可传入 minDate 参数，在 updateYearOptions 中增加跨年比较逻辑。
该方案零依赖、语义清晰、行为确定，完美满足「简单、可控、符合直觉」的自定义月年选择需求。
