如何修改Angular中Kendo Grid日期筛选器的默认操作符？

当前Kendo Angular Grid日期列默认使用“晚于或等于”筛选（对应代码中的"gte"），以下两种方法可将默认操作符改为“等于”：

一、单独修改指定日期列 #

在目标日期列的定义中，配置filterable属性，指定日期类型的默认操作符为"eq"，还可自定义筛选选项列表：

import { Component } from '@angular/core';
import { FilterOperators } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-grid',
  template: `
    <kendo-grid [data]="gridData" [filterable]="true">
      <kendo-grid-column 
        field="OrderDate" 
        title="订单日期" 
        [filterable]="dateFilterConfig">
      </kendo-grid-column>
      <!-- 其他列正常定义即可 -->
    </kendo-grid>
  `
})
export class GridComponent {
  public gridData = [/* 填入你的表格数据 */];
  
  // 配置日期列筛选规则
  public dateFilterConfig: FilterOperators = {
    date: {
      operators: [
        { text: "等于", value: "eq" },
        { text: "晚于或等于", value: "gte" },
        { text: "早于或等于", value: "lte" }
        // 按需保留或添加其他筛选选项
      ],
      defaultOperator: "eq" // 设置默认操作符为“等于”
    }
  };
}

二、全局修改所有日期列 #

如果所有日期列都需要调整默认筛选，直接在Angular模块中全局配置FilterOperators：

import { NgModule } from '@angular/core';
import { GridModule, FilterOperators } from '@progress/kendo-angular-grid';

@NgModule({
  imports: [GridModule],
  providers: [
    {
      provide: FilterOperators,
      useValue: {
        date: {
          operators: [
            { text: "等于", value: "eq" },
            { text: "晚于或等于", value: "gte" },
            { text: "早于或等于", value: "lte" },
            { text: "不等于", value: "neq" }
          ],
          defaultOperator: "eq"
        }
        // 文本、数字等其他类型筛选规则可保持默认
      }
    }
  ]
})
export class AppModule { }

修改后效果展示 #

日期列筛选框默认操作符将变为“等于”：

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