kendo ui网格日期过滤器仅按月和年答案

【问题标题】：kendo ui grid date filter only by month and yearkendo ui网格日期过滤器仅按月和年
【发布时间】：2021-07-14 10:16:02
【问题描述】：

我已经实现了 kendo ui 网格日期过滤器，如下所示；

<kendo:grid-column title="Payment Date" field="paymentDate" width="160px" format="{0:MM/dd/yyyy HH:mm:ss}">
                            
    <kendo:grid-column-filterable>
        <kendo:grid-column-filterable-ui>
            <script>
                function dateFilter(e) {
                    e.kendoDatePicker({
                        format: "MMMM yyyy",
                        depth: "year",
                        start: "year"
                    });
                }
            </script>
        </kendo:grid-column-filterable-ui>
    </kendo:grid-column-filterable>
                                
</kendo:grid-column>

它成功地弹出日期过滤器弹出窗口并能够选择月份和年份，但问题是当我选择例如运算符 "Is equal" to "January 2021" 时，它可能返回第一个一月而不是仅在 2021 年一月返回值。

有什么想法吗？

谢谢

【问题讨论】：

标签： jquery kendo-ui grid kendo-grid kendo-datepicker

【解决方案1】：

您可以使用filter 事件在执行之前更改过滤器：

filter: function(e) {
  if (e.filter !== null) {
    let addDate = null;
    e.filter.filters.forEach(filter => {
      if (filter.field === 'paymentDate') {
        // Change default filter value to first day of month
        filter.value = new Date(filter.value.getFullYear(), filter.value.getMonth(), 1);
        // Change default filter operator from 'eq' to 'gt'
        filter.operator = 'gt';
        
        // Add a new filter for the last day of the month outside the loop
        addDate = filter.value;
      }
    });
    
    if (addDate) {
      e.filter.filters.push({
        field: 'paymentDate',
        operator: 'lt',
        value: new Date(addDate.getFullYear(), (addDate.getMonth() + 1), -1)
      });
    }
  }
}

工作演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" },
      { field: "paymentDate", 
        format: "{0:d}", 
        filterable: {
          ui: function(element) {
            element.kendoDatePicker({
              format: "MMMM yyyy",
              depth: "year",
              start: "year"
            });
          }
        }
      }
    ],
    dataSource: {
      data: [
        { id: 1, name: "Jane Doe", age: 30, paymentDate: new Date(2021, 8, 10) },
        { id: 2, name: "John Doe", age: 33, paymentDate: new Date(2021, 7, 10) }
      ],
      schema: {
        model: { id: "id" },
      }
    },
    filterable: {
      extra: false
    },
    filter: function(e) {
      if (e.filter !== null) {
        let addDate = null;
        e.filter.filters.forEach(filter => {
          if (filter.field === 'paymentDate') {
            // Change default filter value to first day of month
            filter.value = new Date(filter.value.getFullYear(), filter.value.getMonth(), 1);
            // Change default filter operator from 'eq' to 'gt'
            filter.operator = 'gt';
            
            // Add a new filter for the last day of the month outside the loop
            addDate = filter.value;
          }
        });
        
        if (addDate) {
          e.filter.filters.push({
            field: 'paymentDate',
            operator: 'lt',
            value: new Date(addDate.getFullYear(), (addDate.getMonth() + 1), -1)
          });
        }
      }
    }
  });
</script>
</body>
</html>

Dojo

【讨论】：

感谢您的回答，问题是，我正在处理的网格是一个巨大的网格，它仅在 jsp 中实现，列也在 jsp 中