如何创建一个自定义的月份年份选择器（Month-Year Picker）

本文介绍如何用纯 javascript 实现一个轻量、可定制的月份年份选择器，重点解决初始化时年份显示错误（如默认显示 2024 而非当前年 2023）及当前年被误禁用的问题，并提供健壮的联动逻辑与完整可运行代码。

在构建自定义月份年份选择器时，核心挑战在于初始化顺序与动态状态同步。原始代码中，updateYearOptions() 在 updateMonthOptions() 之前执行，导致页面加载时 的值仍为默认的 1（January），而当前月份是 7（July）。此时判断 selectedMonth

✅ 正确解法：先设置月份，再生成年份选项
只需将初始化调用顺序调整为：

updateMonthOptions();  // 先将 month select 设为当前月（如 July → 7）
updateYearOptions();   // 再基于已正确的 selectedMonth 计算年份可用性

这样，updateYearOptions() 中读取到的 selectedMonth 就是真实的当前月份（7），2023 不会被误禁用，且 selectedYear 初始值自然设为 2023。

以下是优化后的完整实现（含关键注释与增强健壮性）：

VIVA

一个免费的AI创意视觉设计平台

下载

<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 或模块作用域；
• 可访问性增强：为

添加 aria-label，并确保键盘导航支持；

该方案零依赖、语义清晰、行为确定，完美满足「简单、可控、符合直觉」的自定义月年选择需求。