如何将下拉选择框替换为日期选择器实现年月动态筛选？

1. 替换HTML结构 #

移除原有的<select>年月下拉框，替换为适合datepicker的输入控件，提供两种选项：

选项A：原生HTML5年月输入（无依赖，简洁高效） #

<input type="month" id="yearMonthPicker" />

原生控件自带年月选择界面，输出值格式为YYYY-MM，和多数后端接口的年月格式天然兼容。

选项B：基于jQuery UI的Datepicker（兼容旧浏览器） #

如果需要适配IE等旧环境，先确保页面已引入jQuery和jQuery UI的CSS/JS文件，再替换为：

<input type="text" id="yearMonthPicker" placeholder="选择年月" />

2. 初始化Datepicker并配置年月选择 #

针对原生控件（选项A） #

无需额外初始化，直接监听选择事件即可。

针对jQuery UI Datepicker（选项B） #

初始化时仅启用年月选择，禁用日期选择功能：

$(function() {
  $("#yearMonthPicker").datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy-mm', // 强制输出YYYY-MM格式
    // 关闭面板时锁定选中的年月，避免手动输入混乱
    onClose: function(dateText, inst) {
      const month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      const year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(year, month, 1));
    },
    // 打开面板时自动定位到已选中的年月
    beforeShow: function(input, inst) {
      if ($(this).val()) {
        const [year, month] = $(this).val().split('-');
        inst.selectedYear = parseInt(year);
        inst.selectedMonth = parseInt(month) - 1;
      }
    }
  });
});

3. 绑定选择事件，复用原有加载逻辑 #

把原下拉框的change事件逻辑，直接绑定到新控件的选择事件上即可：

原生控件（选项A） #

document.getElementById('yearMonthPicker').addEventListener('change', function() {
  const selectedYearMonth = this.value; // 格式为YYYY-MM
  // 调用你原有的加载记录函数，示例：
  loadRecords(selectedYearMonth);
});

jQuery UI Datepicker（选项B） #

可选择监听input的change事件，或插件自带的年月切换事件：

// 方式1：监听input的change事件
$("#yearMonthPicker").on('change', function() {
  const selectedYearMonth = $(this).val();
  loadRecords(selectedYearMonth);
});

// 方式2：使用插件自带的年月切换事件
$("#yearMonthPicker").datepicker({
  // 保留上述初始化配置...
  onChangeMonthYear: function(year, month) {
    const formattedYearMonth = `${year}-${month.toString().padStart(2, '0')}`;
    loadRecords(formattedYearMonth);
  }
});

4. 核心注意事项 #

• 格式一致性：确保datepicker输出的年月格式（YYYY-MM）和原select下拉框的value格式完全一致，原有loadRecords函数无需修改即可直接复用。
• 样式适配：给新输入控件添加原select的CSS类，保持页面样式统一。
• 兼容性：原生type="month"不支持IE，若需兼容旧环境，优先选择jQuery UI或bootstrap-datepicker等成熟插件。

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