KendoUI 网格过滤器日期格式

Posted 2023-05-07

【中文标题】KendoUI 网格过滤器日期格式

【英文标题】：KendoUI grid filter date format

【发布时间】：2015-03-29 17:35:40

【问题描述】：

在我的剑道网格中，我想更改过滤器中的日期格式

例如：2015 年 1 月 30 日至 2015 年 1 月 30 日

我已经更改了开始日期的日期格式

                field: "StartDate",
                title: "Start Date",
                width: 30,
                format: "0:MMM dd, yyyy",
                parseFormats: "0:MM/dd/yyyy",
                headerTemplate: '<label for="check-all"><b>Start Date</b></label>',
                headerAttributes:  style: "text-align: center;" ,
                attributes:  style: "text-align:center !important;padding-right: 25px;" 

我的过滤器中的代码

  filterable: 
                extra: false,
                operators: 
                    string: 
                        startswith: "Starts with",
                        eq: "Is equal to"
                    
                
            ,

截图 see this

谢谢

【参考方案1】：

您应该将filterable.ui 定义为创建DatePicker 并设置所需format 的函数：

    field: "StartDate",
    title: "Start Date",
    width: 30,
    format: "0:MMM dd, yyyy",
    parseFormats: "0:MM/dd/yyyy",
    headerTemplate: '<label for="check-all"><b>Start Date</b></label>',
    headerAttributes:  style: "text-align: center;" ,
    attributes:  style: "text-align:center !important;padding-right: 25px;" ,
    filterable : 
        ui: function (element) 
            element.kendoDatePicker(
                format: "MMM dd, yyyy"
            );
        
    
, 

检查以下sn-p：

$(document).ready(function() 
  $("#grid").kendoGrid(
    dataSource: 
      type: "odata",
      transport: 
        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
      ,
      schema: 
        model: 
          fields: 
            OrderID:  type: "number" ,
            Freight:  type: "number" ,
            ShipName:  type: "string" ,
            OrderDate:  type: "date" ,
            ShipCity:  type: "string" 
          
        
      ,
      pageSize: 20,
      serverPaging: true,
      serverFiltering: true,
      serverSorting: true
    ,
    height: 550,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [
      
        field:"OrderID",
        filterable: false
      ,
      
        field: "OrderDate",
        title: "Order Date",
        format: "0:MMM dd, yyyy",
        parseFormats: "0:MM/dd/yyyy",
        headerTemplate: '<label for="check-all"><b>Start Date</b></label>',
        headerAttributes:  style: "text-align: center;" ,
        attributes:  style: "text-align:center !important;padding-right: 25px;" ,
        filterable : 
          ui: function (element) 
            element.kendoDatePicker(
              format: "MMM dd, yyyy"
            );
          
        
      ,
      "ShipName"
    ]
  );
);

html  font-size: 12px; font-family: Arial, Helvetica, sans-serif; 

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>

<div id="grid"></div>

【讨论】：

如何更改我的过滤器 datePicker 中的文化？

【参考方案2】：

提供的解决方案适用于默认的“菜单过滤器”，但不适用于可过滤：mode: "row"。在这种情况下，您应该使用模板。

 $("#grid").kendoGrid(
        dataSource: 
            type: "odata",
            transport: 
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            ,
            schema: 
                model: 
                    fields: 
                        OrderID: type: "number",
                        Freight: type: "number",
                        ShipName: type: "string",
                        OrderDate: type: "date",
                        ShipCity: type: "string"
                    
                
            ,
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
        ,
        height: 550,
        // filterable: true,
        sortable: true,
        pageable: true,
        columns: [
            
                field: "OrderID",
                filterable: false
            ,
            
                field: "OrderDate",
                title: "Order Date",
                format: "0:MMM dd, yyyy",
                parseFormats: "0:MM/dd/yyyy",
                headerTemplate: '<label for="check-all"><b>Start Date</b></label>',
                headerAttributes: style: "text-align: center;",
                attributes: style: "text-align:center !important;padding-right: 25px;",
                filterable: 
                    cell: 
                        template: function (args) 
                            args.element.kendoDatePicker(
                                format: "MMM dd, yyyy"
                            );
                        
                    
                
            ,
            "ShipName"
        ], filterable: mode: 'row'
    );

【讨论】：

非常感谢您的时间和精力，您在我的工作中帮助了我很多

这很好！有什么方法可以忽略时间？

【参考方案3】：

我收到 Telerik 对 KendoUI Professional 2016.3.1118 的支持的回复。将此添加到您的网格中：

columnMenu: true,
columnMenuInit: function (e) 
    var menu = e.container.find(".k-menu").data("kendoMenu");
    menu.bind('activate', function(ev) 
        if(ev.item.is(':last-child'))     // use 'span.k-dropdown.k-header' if the column is locked
            // if an element in the submenu is focused first, the issue is not observed (menu disappearing)
            ev.item.find('span.k-dropdown.k-header').first().focus();     

            // column field is of type "date"
            if(e.field === "OrderDate") 
                // accessing the DatePickers and setting the custom format
                var datePickerElements = ev.item.find('[data-role="datepicker"]');
                datePickerElements.each(function(idx, input) 
                    var datePicker = $(input).data('kendoDatePicker');
                    datePicker.setOptions(
                        format: 'MMM dd, yyyy'
                    );
                );
            
        
    );
,