Kendo UI Grid Filter DatePicker 過濾時分秒 | Kendo UI Grid Filter DatePicker truncate time

Posted on Edited on

背景

當 grid 使用 server 端做分頁排序篩選時，查詢的邏輯就是靠ToDataSourceResult來控制，
所以改不了內容在幹嘛，
當前端 Grid 需要篩選某日期欄位，該欄位又有時分秒，且使用者不想設定秒數時，
預設的時間篩選欄位只會傳入年月日到後端，時分秒為零，
但這樣在做小於等於或者等於的查詢時就會遇到時分秒不相同而查不到資料的問題，
如果是自己做 api，這種小地方可以調整用System.Data.Entity.DbFunctions.TruncateTime()來過濾時間，但用 Telerik 的類別處理時就不行了，

後來查到官方的解法如連結
https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/filtering/filter-by-date
大致上就是說要在 filter menu 初始化時，複寫套用的按鈕的事件，
例如原本設”等於”條件時，只會傳入一個邏輯就是相等一個日期時間值，
我們要調整為兩個邏輯，
用大於等於當天的零點零分零秒與 小於等於當天的 23 點 59 分 59 秒兩個條件傳入後端，
這樣就可以避免對不上時間的問題了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
filterMenuInit: function (e) {
    //當日期條件設定為小於/等於時 只會傳入年月日 不會傳入時分秒
    //但這樣會撈不到當天0點之後的資料 所以要幫他加到23:59:59來方便處理
    //(因為沒辦法調整語法為trunc time)
    var menu = $(e.container);
    if (e.field === "ColumnDateTime") {
        var firstDropDown = $('[data-bind="value: filters[0].operator"]').data('kendoDropDownList');
        menu.find('button[type="submit"]').click(function (ev) {
            if (firstDropDown.value() === 'eq') {
                ev.preventDefault();
                var selectedDate = menu.find('[data-role="datepicker"]').first().data('kendoDatePicker').value();

                if (!selectedDate) {
                    $(ev.target).closest('[data-role="popup"]').data('kendoPopup').close();
                    return;
                }

                var startOfFilterDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
                var endOfFilterDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), 23, 59, 59);
                var filter = {
                    logic: "and",
                    filters: [
                      { field: "ColumnDateTime", operator: "gte", value: startOfFilterDate },
                      { field: "ColumnDateTime", operator: "lte", value: endOfFilterDate }
                    ]
                };
                e.sender.dataSource.filter(filter);
                $(ev.target).closest('[data-role="popup"]').data('kendoPopup').close();
                return;
            } else if (firstDropDown.value() === 'le') {
                ev.preventDefault();
                var selectedDate = menu.find('[data-role="datepicker"]').first().data('kendoDatePicker').value();

                if (!selectedDate) {
                    $(ev.target).closest('[data-role="popup"]').data('kendoPopup').close();
                    return;
                }

                var endOfFilterDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate(), 23, 59, 59);
                var filter = {
                    logic: "and",
                    filters: [
                      { field: "ColumnDateTime", operator: "lte", value: endOfFilterDate }
                    ]
                };
                e.sender.dataSource.filter(filter);
                $(ev.target).closest('[data-role="popup"]').data('kendoPopup').close();
                return;
            }
        });
    }
}