KendoUI 网格过滤器日期格式 [英] KendoUI grid filter date format

问题描述

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

In my kendo grid I want to change the date format in filter

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

Ex: 1/30/2015 to Jan 30, 2015

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

I already change the date format of Start Date

                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"
                    }
                }
            },

对于截图看到这个

谢谢

推荐答案

您应该将 filterable.ui 定义为一个函数，您可以在其中创建 DatePicker 并设置所需的 <代码>格式:

You should define filterable.ui as a function where you create the DatePicker and set the desired 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"
            });
        }
    }
}, 

检查以下代码段:

$(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>

这篇关于KendoUI 网格过滤器日期格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！