如何在KendoReact Grid中实现支持AND/OR逻辑的日期时间联合筛选功能

默认filter="date"配置仅渲染日期选择器，要支持日期时间联合筛选，需要自定义筛选输入组件替换默认的日期选择器，同时保留原有AND/OR逻辑能力，具体修改如下：

步骤1：封装自定义日期时间筛选输入组件 #

导入Kendo官方的DateTimePicker组件，封装适配Grid筛选规则的输入组件：

import { DateTimePicker } from '@progress/kendo-react-dateinputs';

const DateTimeFilterCell = (props) => {
  const handleChange = (e) => {
    props.onFilterChange(props.filterIndex, e.value, props.operator);
  };
  return (
    <DateTimePicker
      value={props.value || null}
      onChange={handleChange}
      format="yyyy-MM-dd HH:mm:ss"
    />
  );
};

步骤2：修改ColumnMenu组件配置 #

给GridColumnMenuFilter传入自定义筛选UI配置，针对日期类型字段替换默认输入组件：

import * as React from 'react';
import { GridColumnMenuFilter } from '@progress/kendo-react-grid';

export class ColumnMenu extends React.Component {
  render() {
    // 仅日期类型字段使用自定义的日期时间筛选组件
    const customFilterUI = this.props.filter === 'date' ? DateTimeFilterCell : undefined;
    return (
      <div>
        <GridColumnMenuFilter 
          {...this.props}  
          expanded={true}
          firstFilterProps={{ cell: customFilterUI }}
          secondFilterProps={{ cell: customFilterUI }}
        />
      </div>
    );
  }
}

注意：原代码中GridColumnMenuFilter属性处多写了一个多余的闭合花括号，修改时需要删除避免语法报错。

步骤3：Grid日期列无需额外调整 #

原Grid中日期列的配置保持不变即可，筛选功能会自动适配：

<Column field="startTime" columnMenu={ColumnMenu} filter="date"/>   

修改后筛选菜单会保留原有的AND/OR逻辑切换能力，同时输入框会替换为支持时分秒选择的DateTimePicker，可实现日期+时间的联合筛选，匹配预期效果。

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