如何在AG Grid过滤器中添加自定义“业务年度”筛选选项？

AG Grid的日期过滤器原生支持自定义快捷范围选项，不需要修改组件源码，直接通过列配置就能实现和自然年规则不同的业务周期筛选，具体实现步骤如下：

• 先封装业务周期的时间范围计算工具函数，核心对齐4月到次年3月的财年规则，注意卡死时间边界，避免筛选漏数：

/**
 * 计算指定日期所属业务财年（当年4月1日 - 次年3月31日）的起止时间
 * @param {Date} baseDate 基准日期，默认取当前时间
 * @returns {{start: Date, end: Date}}
 */
function getBusinessYearRange(baseDate = new Date()) {
  const curYear = baseDate.getFullYear();
  const curMonth = baseDate.getMonth(); // JS月份从0计数，3对应4月
  // 当前月份>=3（即4月及之后），财年从当年4月开始，否则从上一年4月开始
  const fiscalStartYear = curMonth >= 3 ? curYear : curYear - 1;
  const rangeStart = new Date(fiscalStartYear, 3, 1, 0, 0, 0);
  const rangeEnd = new Date(fiscalStartYear + 1, 2, 31, 23, 59, 59); // 3月最后一天，截止到当天23:59:59
  return { start: rangeStart, end: rangeEnd };
}

/**
 * 计算指定日期所属业务季度的起止时间，财年季度拆分规则：4-6月Q1/7-9月Q2/10-12月Q3/1-3月Q4
 */
function getBusinessQuarterRange(baseDate = new Date()) {
  const curYear = baseDate.getFullYear();
  const curMonth = baseDate.getMonth();
  let quarterStartMonth, belongYear;
  if (curMonth >=3 && curMonth <=5) {
    quarterStartMonth = 3;
    belongYear = curYear;
  } else if (curMonth >=6 && curMonth <=8) {
    quarterStartMonth = 6;
    belongYear = curYear;
  } else if (curMonth >=9 && curMonth <=11) {
    quarterStartMonth =9;
    belongYear = curYear;
  } else {
    quarterStartMonth =0;
    belongYear = curYear;
  }
  const rangeStart = new Date(belongYear, quarterStartMonth, 1, 0,0,0);
  const rangeEnd = new Date(belongYear, quarterStartMonth +3, 0, 23,59,59);
  return {start: rangeStart, end: rangeEnd};
}
// 业务月、业务周的计算逻辑同理，按照公司规则调整起止时间计算即可

• 在日期列的过滤器参数中，通过presets字段注入自定义的业务周期快捷选项，如果不需要原生的自然年、自然季度选项，直接覆盖数组即可，需要保留的话把原生选项和自定义选项合并传入：

const columnDefs = [
  {
    field: 'bizDate',
    headerName: '业务日期',
    filter: 'agDateColumnFilter',
    filterParams: {
      presets: [
        // 可以按需保留原生常用选项，比如今天、昨天、过去7天
        // 以下是自定义业务周期选项
        {
          displayKey: 'thisBizYear',
          displayName: '本业务年',
          getDateRange: () => getBusinessYearRange()
        },
        {
          displayKey: 'lastBizYear',
          displayName: '上一业务年',
          getDateRange: () => {
            const today = new Date();
            const lastYearBase = new Date(today.setFullYear(today.getFullYear() -1));
            return getBusinessYearRange(lastYearBase);
          }
        },
        {
          displayKey: 'thisBizQuarter',
          displayName: '本业务季度',
          getDateRange: () => getBusinessQuarterRange()
        }
      ],
      // 如果单元格存的日期是时间戳/ISO字符串而非Date对象，必须加comparator做日期转换，否则筛选判断会出错
      comparator: (filterLocalDate, cellValue) => {
        const cellDate = new Date(cellValue);
        cellDate.setHours(0,0,0,0);
        if (cellDate < filterLocalDate) return -1;
        if (cellDate > filterLocalDate) return 1;
        return 0;
      }
    }
  }
]

• 版本兼容说明：如果使用的AG Grid版本低于28.0，自定义快捷选项的配置字段名是inRangeOptions而非presets，配置结构完全一致，替换字段名即可。
• 踩坑提示：计算范围时结束时间不要只设到最后一天的0点，否则当天0点之后的数据会被排除在筛选范围外，必须把时分秒设为23:59:59；起始时间统一设为周期第一天的0点，避免把前一天晚些时候的数据纳入统计。

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