如何修复Angular-Kendo Grid中的日期字段过滤问题？

我的JSON数据所有字段均为字符串类型，在Kendo Grid中展示时，即便给日期字段使用了自定义过滤模板，系统仍将其当作字符串处理，导致日期过滤功能无法匹配正确结果。我尝试过把数据源中的字符串日期转换为Date类型，但问题依旧存在。

相关代码 #

数据源与组件逻辑 #

export const customers = [{
    'ContactName': 'Maria Anders',
    'DOB': '01/31/2000'
}, {
    'ContactName': 'Ana Bokov',
    'DOB': '11/23/1974'
}, {
    'ContactName': 'Antonio Moreno',
}];

export class GridSecondComponent implements OnInit {
  public gridData: any[] = customers;
}

Grid模板代码 #

<kendo-grid
    [resizable]="true"
    [kendoGridBinding]="gridData"
    [filterable]="true"
    [groupable]="true"
    [sortable]="true"
    [pageSize]="7"
    [pageable]="true"
    [height]="510">
    <kendo-grid-column field="ContactName" title="Contact" [width]="120"></kendo-grid-column>
    <kendo-grid-column field="DOB" 
    title="Date Of Birth" [width]="200" 
        format="{0:MM/dd/yyyy}">
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
            <kendo-grid-date-filter-cell 
                [column]="column" 
                [filter]="filter">
            </kendo-grid-date-filter-cell>
        </ng-template>
    </kendo-grid-column>    
</kendo-grid>

问题截图 #

解决方法 #

1. 完整转换数据源为Date类型 #

确保转换时覆盖空值情况，避免部分数据未被正确转换：

ngOnInit(): void {
  this.gridData = customers.map(item => ({
    ...item,
    // 空值保留null，非空字符串转为Date对象
    DOB: item.DOB ? new Date(item.DOB) : null
  }));
}

2. 给日期列显式声明类型 #

在Kendo Grid的日期列上添加type="date"，强制组件识别该字段为日期类型：

<kendo-grid-column 
    field="DOB" 
    title="Date Of Birth" 
    [width]="200" 
    format="{0:MM/dd/yyyy}"
    type="date"> <!-- 新增类型声明 -->
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-date-filter-cell 
            [column]="column" 
            [filter]="filter">
        </kendo-grid-date-filter-cell>
    </ng-template>
</kendo-grid-column>

3. 自定义过滤逻辑（兜底方案） #

如果上述方法仍无效，可通过自定义过滤函数实现字符串日期与选择日期的精准比对：

<kendo-grid-column 
    field="DOB" 
    title="Date Of Birth" 
    [width]="200" 
    format="{0:MM/dd/yyyy}"
    [filterable]="{
        cell: {
            template: let-filter let-column="column" => {
                <kendo-grid-date-filter-cell 
                    [column]="column" 
                    [filter]="filter"
                    [filterFn]="customDateFilter">
                </kendo-grid-date-filter-cell>
            }
        }
    }">
</kendo-grid-column>

组件中实现过滤函数：

customDateFilter(value: any, searchValue: Date): boolean {
    if (!value || !searchValue) return true;
    // 统一转换为Date对象，仅比对日期部分（忽略时间）
    const targetDate = typeof value === 'string' ? new Date(value) : value;
    return targetDate.toDateString() === searchValue.toDateString();
}

内容的提问来源于stack exchange，提问作者sam sergiy klok