如何让React-Table搜索栏正确过滤2022-08-13这类格式的日期？

当然可以实现2022-07-12这类简洁日期格式的搜索，问题核心在于React-Table默认的全局过滤是纯字符串匹配，如果你的ReportDate字段存储/返回的是带时分秒的格式（比如2022-07-12 14:30:00或2022-07-12T14:30:00），直接搜索2022-07-12就会因为字符串不匹配而无结果。

你只需要自定义过滤逻辑，针对日期格式做特殊处理即可，以下是两种可行方案：

方案一：全局自定义过滤函数 #

修改React-Table的全局过滤逻辑，当检测到输入是YYYY-MM-DD格式时，自动提取表格数据中ReportDate的日期部分进行匹配：

// 自定义全局过滤函数
const filterGlobal = (rows, filterValue) => {
  // 匹配YYYY-MM-DD格式的正则
  const datePattern = /^\d{4}-\d{2}-\d{2}$/;
  // 如果输入是标准日期格式
  if (datePattern.test(filterValue)) {
    return rows.filter(row => {
      // 提取ReportDate的日期部分（去掉时分秒）
      const rawDate = row.values.ReportDate;
      const pureDate = rawDate.split('T')[0] || rawDate.split(' ')[0];
      return pureDate === filterValue;
    });
  }
  // 非日期格式时，保留原有的全局模糊匹配逻辑
  return rows.filter(row => {
    return Object.values(row.values).some(value =>
      String(value).toLowerCase().includes(filterValue.toLowerCase())
    );
  });
};

// 在useTable中传入自定义过滤函数
const tableInstance = useTable(
  {
    columns,
    data,
    filterGlobal, // 启用自定义全局过滤
  },
  useGlobalFilter
);

方案二：针对ReportDate字段单独设置过滤逻辑 #

如果你只需要针对ReportDate字段适配日期搜索，可以在列定义中单独配置过滤函数：

const columns = [
  // 其他列配置...
  {
    Header: '报告日期',
    accessor: 'ReportDate',
    // 自定义该列的过滤逻辑
    filterFn: (rows, id, filterValue) => {
      const datePattern = /^\d{4}-\d{2}-\d{2}$/;
      if (datePattern.test(filterValue)) {
        return rows.filter(row => {
          const rawDate = row.values[id];
          const pureDate = rawDate.split('T')[0] || rawDate.split(' ')[0];
          return pureDate === filterValue;
        });
      }
      // 非日期输入时，保留原有的包含匹配
      return rows.filter(row =>
        String(row.values[id]).toLowerCase().includes(filterValue.toLowerCase())
      );
    },
  },
];

注意：你提供的GlobalFilter组件仅负责输入框的UI和传递过滤值，不需要修改这个组件，只需要调整React-Table的过滤逻辑即可。

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