KendoReact 日期时间过滤答案

【问题标题】：KendoReact DateTime FilteringKendoReact 日期时间过滤
【发布时间】：2021-08-19 18:01:33
【问题描述】：

我正在使用 Kendo-react-grid 过滤日期和时间。我已经使用文档Kendo React 中指定的 GridColumnMenuFilter 创建了一个组件 ColumnMenu。他们文档中的所有示例仅显示日期过滤器。但在我的要求中，我需要使用逻辑（和/或）过滤日期和时间。请查看预期的示例图像。

请在下面找到代码

网格：

<Grid
    data={result}
    {...dataState}
    onDataStateChange={dataStateChange}
    sortable={true}
    pageable={true}
    pageSize={8}
>
    <Column field="ProductID" title="Product Id" filter={'numeric'} columnMenu={ColumnMenu}/>
    <Column field="ProductName" filter="text" columnMenu={ColumnMenu}/>
    <Column field="startTime" columnMenu={ColumnMenu} filter="date"/>   
</Grid>

列菜单：

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

export class ColumnMenu extends React.Component {
    render() {
        return (
            <div>
                <GridColumnMenuFilter {...props}  expanded={true}} />
            </div>
        );
    }
}

我的过滤菜单看起来像这样

提前致谢！

【问题讨论】：

标签： reactjs kendo-ui datagrid kendo-grid

【解决方案1】：

KendoReact 不正式支持网格单元格上的日期和时间过滤器（最终在为列指定过滤器后进行过滤）：https://www.telerik.com/kendo-react-ui/components/grid/api/GridFilterCellProps/#toc-filtertype

唯一支持的过滤器是：“文本”| “数字” | “布尔” | “日期” 默认为“文本”

【讨论】：