React Admin中如何对DateField字段按时间区间执行过滤

你使用的是react-admin生态的DateField组件，要实现带时间的区间过滤直接用官方内置组件搭配即可，具体实现步骤如下：

1. 定义时间范围过滤器 #

因为你开启了showTime属性需要精确到时间，直接使用DateRangeInput作为过滤输入组件即可：

import { Filter, DateRangeInput } from 'react-admin';

const StartsAtFilter = (props) => (
  <Filter {...props}>
    <DateRangeInput source="starts_at" label="开始时间区间" />
  </Filter>
);

注意这里的source属性值要和你的DateField的source保持完全一致，都为starts_at。

2. 在列表页绑定过滤器 #

把写好的过滤器挂载到对应资源的List组件的filters属性上：

import { List, Datagrid, DateField } from 'react-admin';

export const YourResourceList = () => (
  <List filters={<StartsAtFilter />}>
    <Datagrid>
      {/* 其余业务字段 */}
      <DateField source="starts_at" showTime />
      {/* 其余业务字段 */}
    </Datagrid>
  </List>
);

3. 后端查询逻辑适配 #

前端选择时间范围后会自动向接口传递两个查询参数，适配你给出的带时区时间格式2021-10-24 12:16:31.843+03：

• starts_at_gte：选中的时间区间起始值
• starts_at_lte：选中的时间区间结束值

后端只需要在查询逻辑中增加判断：数据库starts_at字段大于等于starts_at_gte、小于等于starts_at_lte即可完成区间过滤。如果你使用的是react-admin官方适配的后端服务（如Hasura、Supabase等），无需额外修改代码，原生支持该格式的范围查询。

可选：自定义参数格式 #

如果你需要修改默认的参数后缀，可通过parse属性自定义输出的参数名：

<DateRangeInput 
  source="starts_at" 
  parse={(val) => ({
    starts_at_start: val.start,
    starts_at_end: val.end
  })}
/>

修改后前端会传递starts_at_start和starts_at_end两个参数，后端对应适配即可。

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