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

聖光之護 2026-01-11 00:00:00 次阅读

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

在构建自定义月份年份选择器时，核心挑战在于初始化顺序与动态状态同步。原始代码中，updateYearOptions() 在 updateMonthOptions() 之前执行，导致页面加载时 Year:

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 或模块作用域；
可访问性增强：为
响应式适配：在移动端建议添加 touchstart 延迟或使用原生 input[type="month"] 作为降级方案（但注意其不支持自定义样式）；
扩展性提示：如需支持「最小可选日期」，可传入 minDate 参数，在 updateYearOptions 中增加跨年比较逻辑。