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

以下是自定义过滤器用户界面的dateFilter功能：

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

但是，过滤器永远不会起作用，因为当您从过滤器菜单中选择日期时，默认情况下会将当前日期用作日期的日期部分。例如，如果您选择2016年3月14日的2016年3月，则日期为2016年3月14日。但是，当我在"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>

过滤Kendo Grid的格式化日期列

1 个答案: