如何修改KendoReact DataGrid的GridColumnMenuFilter日期格式为dd-MM-yyyy

要实现数据显示和筛选均使用dd-MM-yyyy格式，你需要自定义列菜单中日期筛选器的操作符，指定日期选择器的格式，并确保筛选值能正确解析为Date对象。以下是具体修改步骤：

步骤1：修改ColumnMenu.js组件 #

在列菜单组件中，导入KendoReact的DatePicker，自定义日期筛选操作符，并传递给GridColumnMenuFilter：

import * as React from "react";
import { GridColumnMenuFilter, GridColumnMenuCheckboxFilter } from "@progress/kendo-react-grid";
import { DatePicker } from '@progress/kendo-react-dateinputs'; // 导入日期选择器
import products from "./products.json";

// 自定义日期筛选操作符，指定DatePicker格式为dd-MM-yyyy
const dateFilterOperators = [
  { text: '等于', operator: 'eq', editor: (props) => <DatePicker {...props} format="dd-MM-yyyy" /> },
  { text: '不等于', operator: 'neq', editor: (props) => <DatePicker {...props} format="dd-MM-yyyy" /> },
  { text: '晚于', operator: 'gt', editor: (props) => <DatePicker {...props} format="dd-MM-yyyy" /> },
  { text: '晚于或等于', operator: 'gte', editor: (props) => <DatePicker {...props} format="dd-MM-yyyy" /> },
  { text: '早于', operator: 'lt', editor: (props) => <DatePicker {...props} format="dd-MM-yyyy" /> },
  { text: '早于或等于', operator: 'lte', editor: (props) => <DatePicker {...props} format="dd-MM-yyyy" /> },
  { text: '为空', operator: 'isnull' },
  { text: '不为空', operator: 'isnotnull' },
];

export const ColumnMenu = (props) => {
    // 仅对日期列应用自定义操作符
    const targetOperators = props.field === 'InsertedDate' ? dateFilterOperators : props.filterOperators;
    
    return (
        <div>
            <GridColumnMenuFilter 
                {...props} 
                expanded={true} 
                filterOperators={targetOperators}
                // 解析dd-MM-yyyy格式的字符串为Date对象，确保筛选逻辑正确
                filterParser={(value) => {
                    if (typeof value === 'string') {
                        const [day, month, year] = value.split('-');
                        return new Date(year, parseInt(month) - 1, parseInt(day));
                    }
                    return value;
                }}
            />
        </div>
    );
};

export const ColumnMenuCheckboxFilter = (props) => {
    return (
        <div>
            <GridColumnMenuCheckboxFilter
                {...props}
                data={products}
                expanded={true}
            />
        </div>
    );
};

步骤2：确认列的显示格式（已完成） #

你在App.js中已经为InsertedDate列设置了format="{0:dd-MM-yyyy}"，这确保了表格中日期的显示格式正确，无需额外修改：

<Column field="InsertedDate" filter="date" format="{0:dd-MM-yyyy}" columnMenu={ColumnMenu} />

说明 #

• 通过自定义dateFilterOperators，我们为每个日期筛选操作绑定了指定格式的DatePicker，让筛选输入框显示和接受dd-MM-yyyy格式的日期。
• filterParser函数负责将用户输入的dd-MM-yyyy字符串解析为正确的Date对象，保证筛选逻辑能正常工作。
• 仅对InsertedDate列应用自定义操作符，不影响其他类型列的筛选行为。

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