React Admin如何使用Date字段实现今日/本周等快捷日期筛选

React Admin的筛选参数默认遵循字段名_操作符的命名规则：

• last_seen是官方示例里数据表的日期类型字段名，对应你场景中的date字段
• 后缀_gte是Greater Than or Equal的缩写，含义是「大于等于」，用来限定筛选结果的对应字段值≥传入的时间阈值
• 后缀_lte是Less Than or Equal的缩写，含义是「小于等于」，用来限定筛选结果的对应字段值≤传入的时间阈值
  示例中将last_seen_lte设为undefined，意思是仅限制时间下限、不限制时间上限。

你可以直接把筛选参数的字段前缀替换为你自己的date字段，搭配时间处理函数计算各个维度的时间边界即可，以下是完整实现示例：

1. 首先引入需要的依赖（时间处理用date-fns，也可以替换为你习惯的工具库）

import { FilterList, FilterListItem } from 'react-admin';
import { startOfToday, endOfToday, startOfWeek, endOfWeek, startOfMonth, endOfMonth, subWeeks, subMonths } from 'date-fns';

2. 封装侧边栏日期筛选组件

const DateSidebarFilter = () => (
  <FilterList label="日期筛选">
    {/* 今日 */}
    <FilterListItem
      label="今日"
      value={{
        date_gte: startOfToday().toISOString(),
        date_lte: endOfToday().toISOString(),
      }}
    />
    {/* 本周 */}
    <FilterListItem
      label="本周"
      value={{
        date_gte: startOfWeek(new Date()).toISOString(),
        date_lte: endOfWeek(new Date()).toISOString(),
      }}
    />
    {/* 上周 */}
    <FilterListItem
      label="上周"
      value={{
        date_gte: startOfWeek(subWeeks(new Date(), 1)).toISOString(),
        date_lte: endOfWeek(subWeeks(new Date(), 1)).toISOString(),
      }}
    />
    {/* 本月 */}
    <FilterListItem
      label="本月"
      value={{
        date_gte: startOfMonth(new Date()).toISOString(),
        date_lte: endOfMonth(new Date()).toISOString(),
      }}
    />
    {/* 上月 */}
    <FilterListItem
      label="上月"
      value={{
        date_gte: startOfMonth(subMonths(new Date(), 1)).toISOString(),
        date_lte: endOfMonth(subMonths(new Date(), 1)).toISOString(),
      }}
    />
  </FilterList>
);

3. 把筛选组件挂载到列表页的侧边栏位置

export const YourDataList = () => (
  <List aside={<DateSidebarFilter />}>
    {/* 原有数据表逻辑，保留id、date、name、email、address等列的配置即可 */}
  </List>
);

注意：如果你的后端不支持ISO格式的时间参数，把toISOString()替换为适配后端的时间格式即可，React Admin会把你传入的筛选参数原样透传给dataProvider。

内容的提问来源于stack exchange，提问作者Rifat al mamun