过滤 Kendo 网格的格式化日期列

Filtering a formatted date column of a Kendo Grid

我的网格中有这个 DateTime 列:

column.Bound(c => c.PaymentMonth).ClientTemplate("#= PaymentMonthString #")
            .Filterable(filterable => filterable
            .Operators(op => op.ForDate(d => d.Clear().IsEqualTo("Equals")))
            .Extra(false).UI("dateFilter"));

PaymentMonthString是只读字符串属性,returnsPaymentMonth"MMMM yyyy"格式

这是自定义过滤器 UI 的 dateFilter 函数:

<script>
    function dateFilter(e) {
        e.kendoDatePicker({
            format: "MMMM yyyy",
            depth: "year",
            start: "year"
        });
    }
</script>

但是,过滤器永远不起作用,因为当您从过滤器菜单中 select 一个日期时,默认情况下使用当前日期作为日期的日期部分。例如,如果您在 3/14/2016 选择 2016 年 3 月,则日期将为 3/14/2016。但是,当我过滤 "MMMM yyyy" 列时,我不关心这一天。应包括 2016 年 3 月的所有日期。我该怎么做?

我想出了如何让它发挥作用。在过滤器 UI 中日期选择器的更改事件中,我们可以为大于或等于所选月份的第一天且小于或等于的所有日期过滤网格的数据源到那个月的最后一个。这是 dateFilter 函数的更新代码:

<script>
    function dateFilter(e) {
        e.removeAttr("data-bind");
        e.kendoDatePicker({
            format: "MMMM yyyy",
            depth: "year",
            start: "year",
            change: function () {
                var ds = $("#grid").data().kendoGrid.dataSource;
                var filter = {
                    "logic": "and",
                    "filters": [
                      {
                          "field": "PaymentMonth",
                          "operator": "gte",
                          "value": new Date(this.value().getFullYear(), this.value().getMonth(), 0)
                      },
                      {
                          "field": "PaymentMonth",
                          "operator": "lte",
                          "value": new Date(this.value().getFullYear(), this.value().getMonth() + 1, 0)
                      }
                    ]
                };
                ds.filter(filter);
                this.element.closest("form").data().kendoPopup.close();
            }
        });
    }
</script>