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

聖光之護

发布时间：2026-01-11 13:32:02

|

378人浏览过

|

来源于php中文网

原创

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;
}

? 注意事项与最佳实践：

GitHub Copilot

GitHub AI编程工具，实时编程建议

下载

• 始终校验输入值：parseInt(...) 后应检查 NaN，此处通过 || currentMonth / || currentYear 提供安全兜底；
• 避免全局污染：可将 selectedYear 封装进 IIFE 或模块作用域；
• 可访问性增强：为 添加 aria-label，并确保键盘导航支持；
• 响应式适配：在移动端建议添加 touchstart 延迟或使用原生 input[type="month"] 作为降级方案（但注意其不支持自定义样式）；
• 扩展性提示：如需支持「最小可选日期」，可传入 minDate 参数，在 updateYearOptions 中增加跨年比较逻辑。

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