Javascript 剑道格网剑道格网选择器

我想为剑道网格反应包装器介绍一些类似于kendoDateRangePicker的东西。kendoDatePicker允许您只选择一个日期，而不是两个：

filterable : {
 cell: {
   template: function (args) {
       args.element.kendoDatePicker({
       });
   },
   showOperators: true,
   enabled: true                        
 },         
}

我正在解决类似的问题，但剑道网格。 该任务涉及“@progress/kendo-grid-react-wrapper”没有的配置，即“@progress/kendo-react-grid”中GridColumn中的filterCell； 使用剑道反应组件，可通过以下方式轻松实现

---

但是包装器中没有filterCell属性。

这可以通过包装器和模板函数完成：

1） 专栏：

        <GridColumn field="OrderDate" title="Order Date" format="{0: yyyy-MM-dd}" filterable={this.filterableDates} />

2） 可过滤：

    this.filterableDates = {
  cell: {
    template: function (args) {
      let valueOne = null;
      let valueTwo = null;
      let grid = $('.k-grid').data('kendoGrid')
      let parent = $(args.element).parent()
      $(parent).append("<input id='second'>")
      args.element.kendoDatePicker({
        change: function (e) {
          valueOne = e.sender.value()
          grid.dataSource.filter({
            logic: "and",
            filters: [
              { field: "OrderDate", operator: "ge", value: valueOne },
              { field: "OrderDate", operator: "le", value: valueTwo }
            ]
          })
        }
      });
      $("#second").kendoDatePicker({
        change: function (e) {
          valueTwo = e.sender.value()
          grid.dataSource.filter({
            logic: "and",
            filters: [
              { field: "OrderDate", operator: "ge", value: valueOne },
              { field: "OrderDate", operator: "le", value: valueTwo }
            ]
          })
        }
      });
    },
    showOperators: true,
    enabled: true
  },
}

this.filterableDates={
单元格：{
模板：函数（args）{
设valueOne=null；
设valueTwo=null；
让网格=$（'.k-grid'）.data（'kendoGrid'））
让parent=$（args.element）.parent（）
$（父项）。追加（“”）
args.element.kendoDatePicker({
更改：功能（e）{
valueOne=e.sender.value（）
grid.dataSource.filter({
逻辑：“和”，
过滤器：[
{字段：“OrderDate”，运算符：“ge”，值：valueOne}，
{字段：“OrderDate”，运算符：“le”，值：valueTwo}
]
})
}
});
$（“#秒”）.kendoDatePicker({
更改：功能（e）{
valueTwo=e.sender.value（）
grid.dataSource.filter({
逻辑：“和”，
过滤器：[
{字段：“OrderDate”，运算符：“ge”，值：valueOne}，
{字段：“OrderDate”，运算符：“le”，值：valueTwo}
]
})
}
});
},
主持人：是的，
已启用：true
},
}

当选择器的值更改时，这将过滤网格

这是