如何在jQuery UI Datepicker中禁用指定年份？

需求说明 #

需要在启用changeYear: true的jQuery UI Datepicker中，让特定年份不显示在年份下拉框，并且点击年份上下按钮时自动跳过这些年份。常规的日期禁用或范围限制无法满足需求（禁用日期仍会显示，范围限制只能设置连续区间）。

问题分析 #

• 直接在页面初始化时执行JS操作.ui-datepicker-year option无效，因为日历下拉框是用户点击输入框后动态生成的，页面加载时不存在该元素。
• 用css('display', 'none')隐藏<option>兼容性差，仅部分浏览器（如Firefox）生效，Chrome等浏览器不支持此方式隐藏下拉选项。

解决方案 #

方案1：利用beforeShow事件动态移除年份选项 #

每次日历弹出前，移除不需要的年份选项，确保下拉框中无目标年份：

$(function() {
  $('#datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: '2020-01-01',
    maxDate: '2025-12-31',
    changeMonth: true,
    changeYear: true,
    // 日历弹出前触发
    beforeShow: function(input, inst) {
      // 定义需要隐藏的年份
      const hiddenYears = ['2022', '2023'];
      $('.ui-datepicker-year option').each(function() {
        const yearVal = $(this).val();
        if (hiddenYears.includes(yearVal)) {
          $(this).remove(); // 直接移除选项，兼容性更好
        }
      });
    }
  });
});

方案2：重写年份生成方法（彻底解决上下按钮跳过问题） #

通过重写jQuery UI Datepicker的_generateYearRange方法，从根源控制生成的年份列表，这样不仅下拉框无目标年份，点击上下年份按钮时也会自动跳过：

$(function() {
  // 重写生成年份下拉列表的核心方法
  $.datepicker._generateYearRange = function(minYear, maxYear, selectedYear) {
    // 定义需要排除的年份
    const excludedYears = [2022, 2023];
    let yearHtml = '';
    
    for (let year = minYear; year <= maxYear; year++) {
      // 仅生成不在排除列表中的年份选项
      if (!excludedYears.includes(year)) {
        yearHtml += `<option value="${year}" ${year === selectedYear ? 'selected' : ''}>${year}</option>`;
      }
    }
    return yearHtml;
  };

  // 初始化日期选择器
  $('#datepicker').datepicker({
    dateFormat: 'yy-mm-dd',
    minDate: '2020-01-01',
    maxDate: '2025-12-31',
    changeMonth: true,
    changeYear: true
  });
});

原代码无效原因 #

1. 元素不存在：页面加载时，日历下拉框尚未生成，$('.ui-datepicker-year option')无法找到任何元素，因此控制台无输出。
2. 兼容性问题：$(this).css('display', 'none')对<option>的隐藏效果在Chrome等浏览器中不生效，直接移除或重写生成逻辑是更可靠的方式。

内容的提问来源于stack exchange，提问作者Jellby