kendo-ui - 过滤 Kendo 网格的格式化日期列

Question

我的网格中有这个 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 是一个只读字符串属性，它以 "MMMM yyyy" 格式返回 PaymentMonth。

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

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

但是，过滤器永远不会起作用，因为当您从过滤器菜单中选择日期时，默认情况下将当前日期用作日期的日期部分。例如，如果您在 3/14/2016 选择 2016 年 3 月，则日期将为 3/14/2016。但是，当我过滤 "MMMM yyyy" 列时，我并不关心这一天。应包括 2016 年 3 月的所有日期。我怎样才能做到这一点？

Answer 1

我想出了如何让它发挥作用。在过滤器 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>