按日期范围过滤 Kendo 数据源答案

【问题标题】：Filter Kendo DataSource by date range按日期范围过滤 Kendo 数据源
【发布时间】：2023-03-13 16:02:01
【问题描述】：

我目前正在尝试使用 Kendo DropDownList 过滤 Kendo DataSource，但它没有像我预期的那样工作。

我有一个 Kendo DropDownList，其中包含一些选项，允许用户按 1、3、6、9 或 12 个月过滤 DataSource。我还使用moment.js 来处理将月份添加到当前日期。

这是我的 DropDownList onChange 事件：

onMonthRangeChange: function (e) {
    var value = e.sender.value();
    switch (value) {
        case "1":
            var oneMonth = moment().add(1, "month");
            var firstOfMonth = moment().startOf("month");
            viewModel.myTaskDataSource.query({
                logic: "and",
                filters: [
                    { field: "DueDate", operator: "gte", value: firstOfMonth },
                    { field: "DueDate", operator: "lte", value: oneMonth }
                ]
            });
            break;
        case "3":
            // similar to above code except for 3 months
        case "6":
            // similar to above code except for 6 months
        case "9":
            // similar to above code except for 9 months
        case "12":
            // similar to above code except for 12 month
    }
})

虽然我认为这会起作用，但事实并非如此。相反，它只显示数据源中的所有内容。我什至尝试将viewModel.myTaskDataSource.query 更改为viewModel.myTaskDataSource.filter，但随后出现以下错误：

未捕获的类型错误：e.indexOf 不是函数 - kendo.all.js:1129

我还怀疑可能是因为 Kendo 和 moment.js 使用不同的时间格式，但即使在将所有 kendo 日期解析为时刻日期后，我也会得到相同的错误。

【问题讨论】：

标签： javascript kendo-ui filtering

【解决方案1】：

经过大量的试验，我终于找到了解决办法！

我更仔细地查看了错误并注意到它提到了一些关于 kendo.parseDate 的内容，所以我知道日期存在一些问题导致过滤不起作用。

我只是将toDate() 添加到我的moment.js 日期对象的末尾，现在一切正常！

我的过滤现在如下所示：

onMonthRangeChange: function (e) {
    var value = e.sender.value();
    switch (value) {
        case "1":
            var oneMonth = moment().add(1, "month").toDate();
            var firstOfMonth = moment().startOf("month").toDate();
            viewModel.myTaskDataSource.filter({
                logic: "and",
                filters: [
                    { field: "DueDate", operator: "gte", value: firstOfMonth },
                    { field: "DueDate", operator: "lte", value: oneMonth }
                ]
            });
            break;
        case "3":
            // similar to above code except for 3 months
        case "6":
            // similar to above code except for 6 months
        case "9":
            // similar to above code except for 9 months
        case "12":
            // similar to above code except for 12 month
    }
})

【讨论】：