jQuery版Kendo Grid自定义仅日期筛选功能实现报错求助

我尝试在Kendo UI Grid头部过滤器自带的默认运算符基础上，新增仅按日期筛选的功能，但控制台一直抛出报错，报错截图如下：

相关实现代码如下：

JS代码 #

var sampleData = [{
  EventID: 1,
  EventName: "Event 1",
  EventDateTime: new Date(2013, 8, 10, 17, 0)
}, {
  EventID: 2,
  EventName: "Event 2",
  EventDateTime: new Date(2013, 8, 10, 18, 0)
}, {
  EventID: 3,
  EventName: "Event 3",
  EventDateTime: new Date(2013, 8, 10, 19, 0)
}, {
  EventID: 4,
  EventName: "Event 4",
  EventDateTime: new Date(2013, 8, 10, 20, 0)
}, {
  EventID: 5,
  EventName: "Event 5",
  EventDateTime: new Date(2013, 8, 11, 19, 0)
}, {
  EventID: 6,
  EventName: "Event 6",
  EventDateTime: new Date()
}, ];

$(function() {
  var dataSource = new kendo.data.DataSource({
    transport: {
      read: function(e) {
        e.success(sampleData);
      }
    },
    pageSize: 10,
    schema: {
      parse: function(data) {
        var events = [];
        for (var i = 0; i < data.length; i++) {
          var event = data[i];
          event.EventDate = kendo.toString(event.EventDateTime, 'yyyy/MM/dd');
          events.push(event);
        }
        return events;
      },
      model: {
        id: "EventID",
        fields: {
          EventID: {
            editable: false,
            nullable: true
          },
          EventName: {
            validation: {
              required: true
            }
          },
          EventDateTime: {
            type: "date"
          },
          EventDate: {
            type: "date"
          }
        }
      }
    }
  });

  $("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    filterable: {
      extra: false,
      operators: {
        //重写筛选菜单展示的默认运算符列表
        string: {
          startswith: "开头为",
          endswith: "结尾为",
          eq: "等于",
          neq: "不等于",
          isnullorempty: "为空",
          isnotnullorempty: "不为空",
          contains: "包含",
          doesnotcontain: "不包含"
        },
        date: {
          ed: "仅日期相等",
          eq: "等于",
          neq: "不等于",
          gte: "大于等于",
          gt: "大于",
          lte: "小于等于",
          lt: "小于",
          isnullorempty: "为空",
          isnotnullorempty: "不为空"
        }
      }
    },
    columns: [{
        field: "EventName",
        title: "事件名称"
      },
      {
        field: "EventDate",
        title: "事件日期",
        template: "#= kendo.toString(EventDateTime, 'yyyy/MM/dd HH:mm') #"
      }
    ]
  });
});

HTML代码 #

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.default-v2.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script>
<div id="grid"></div>

• 核心原因是你自定义了ed（仅日期相等）这个筛选运算符，但Kendo UI内置没有对应的处理逻辑，调用时找不到对应方法就抛出异常。
• 次要问题：你在schema.parse中将EventDate转为了yyyy/MM/dd格式的字符串，但在model.fields中又将EventDate的类型定义为date，类型不匹配也会导致筛选时出现异常。

首先要给Kendo UI的过滤器注册你自定义的ed运算符的处理逻辑，其次修正EventDate的类型问题，完整修改步骤如下：

1. 首先在Grid初始化前注册自定义日期筛选运算符

// 注册仅日期相等的自定义运算符
kendo.data.filters.ed = function(field, value) {
  // 把字段值和筛选值都转为当天0点的时间戳比较
  var fieldDate = new Date(field.getFullYear(), field.getMonth(), field.getDate());
  var filterDate = new Date(value.getFullYear(), value.getMonth(), value.getDate());
  return fieldDate.getTime() === filterDate.getTime();
};
// 补充运算符文本映射，避免筛选面板显示异常
kendo.ui.FilterCell.prototype.options.operators.date.ed = "仅日期相等";

2. 修正schema.parse里的EventDate赋值逻辑，不要转成字符串，直接存不带时分秒的日期对象

parse: function(data) {
  var events = [];
  for (var i = 0; i < data.length; i++) {
    var event = data[i];
    var dt = event.EventDateTime;
    // 直接存日期对象，和model定义的date类型匹配
    event.EventDate = new Date(dt.getFullYear(), dt.getMonth(), dt.getDate());
    events.push(event);
  }
  return events;
}

修改完成后运行就不会报错，选择「仅日期相等」筛选时会自动忽略时分秒，只按年月日匹配结果。

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