Question

我的Kendo Grid中有一个日期时间列。值如下所示：2014-04-11 12:43:41.720

在我的网格中，我更改了模板，只显示为短日期：04/11/2014

我之所以不将数据发送到预先格式化的列是因为我希望将时间考虑在内进行排序。我现在的问题是，在过滤时，特别是在做＆＃34;等于＆＃34;过滤器，如果我从日期选择器中选择4/11/2014，则不会显示任何结果，因为默认时间为12:00:00.00。

无论如何我可以根据文本而不是值来过滤吗？或者我可以将预先格式化的日期发送到网格并让排序使用不同的字段吗？

我的专栏的JS片段：

columns: [
    { 
      field: "CREATEDATE",
      title: "Created",
      width: 78,
      template: '#= kendo.toString(kendo.parseDate(CREATEDATE, "yyyy-MM-dd"), "MM/dd/yyyy") #',
      filterable: true,
      attributes: { style: "text-align:center;" }
    }
]

Answer 1

Telerik论坛有一个example of this here可供下载。

为方便起见，我将粘贴他们创建的代码。示例的下三分之一包含劫持内置Kendo过滤器操作所需的javascript / jquery，并允许您提供自己的处理。

基本上，您必须使用您感兴趣的日期部分构建新的日期对象，即。日，月，年。

<html>
<head>
    <title>Dynamically change date format</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>

    <input id="dropDownList"></input>
    <br />
    <div id="grid"></div>

    <script>
        var sampleData = [
            { name: "John", date: new Date("October 13, 2012 11:13:00")},
            { name: "Lisa", date: new Date("March 18, 2012 07:13:00")},
            { name: "Jack", date: new Date("September 28, 2011 12:28:43")},
            { name: "Maria", date: new Date("May 28, 2012 11:13:00")},
            { name: "Steven", date: new Date("May 31, 2012 07:13:00")},
            { name: "Bob", date: new Date("September 02, 2012 12:28:43")}
        ];

        var flag = 1;

        function formatDate(date) {
            switch(flag)
            {
                case 1:
                    return kendo.toString(date, "g");
                case 2:
                    return kendo.toString(date, "d");
                case 3:
                    return kendo.toString(date, "Y");
                default:
                    return kendo.toString(date, "F");
            }
        }

        $("#dropDownList").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                { text: "Weekly", value: "1" },
                { text: "Monthly", value: "2" },
                { text: "Yearly", value: "3" }
            ],
            index: 0,
            change: function(e) {
                flag = parseInt(this.value());
                console.log(flag);
                $("#grid").data("kendoGrid").refresh();
            }
        });

        $("#grid").kendoGrid({
            dataSource: {
                data: sampleData,
                schema: {
                    model: {
                        fields: {
                            name: { type: "string" },
                            date: { type: "date" }
                        }
                    }
                }
            },
            columns: [
                { field: "name", title: "Name" },
                { field: "date", title: "Date" , template: "#= formatDate(date) #"}
            ],
            filterable: true
        });

        $(document).ready(function() {
            $("th[data-title=Date]")
                .data("kendoFilterMenu")
                    .form.find("button[type=submit]")
                        .click(function(e) {
                            //gets filter type
                            var filterType = $(this.form).find($("select[data-role=dropdownlist]")).eq(0).val();
                            //if filter is "Is equal to"
                            if(filterType == "eq") {
                                e.preventDefault();
                                //gets the datePicker input date
                                var selectedDate = $(this.form).find($("input[data-role=datepicker]")).eq(0).val();
                                //create a filter
                                $("#grid").data("kendoGrid").dataSource.filter({
                                    field: "date",
                                    //create custom filter operator
                                    operator: function(fieldDate) {

                                        var parsedSelectedDate = kendo.parseDate(selectedDate);
                                        //parse the field date in order to ignore the time
                                        var parsedFieldDate = new Date(fieldDate.getFullYear(),  fieldDate.getMonth(), fieldDate.getDate());
                                        var result = (parsedFieldDate.getTime() == parsedSelectedDate.getTime());

                                        return result;

                                    },
                                    value: selectedDate
                                });
                                //close filter window
                                $("th[data-title=Date]").data("kendoFilterMenu").popup.close();
                            }
                            console.log("filter"); 
                        });
        });
    </script>
</body>
</html>

Answer 2

我最初的过滤问题的解决方案已由jwatts解决，但我想为其他人添加另一个答案，因为我最终更改了我的代码以解决我的第二个问题：

“或者我可以将预先格式化的日期发送到网格并让排序使用不同的字段吗？”

我最终使用网格中预先格式化的日期作为列值。过滤效果很好，因为我不必担心时间戳。为了修复排序问题，在我的控制器中（重新绑定）我检查DataSourceRequest是否有任何排序参数，如果用户正在排序预先格式化的日期列，我将其切换为使用完整的日期时间列（隐藏）。 / p>

if (request.Sorts != null)
{
    foreach (var sort in request.Sorts)
    {
        if (sort.Member.Equals("CREATEDATE_FORMATTED", System.StringComparison.OrdinalIgnoreCase))
        {
            sort.Member = "CREATEDATE";
        }
    }
}

Answer 3

还有另一种方法可以显示可过滤和可排序的时间。我在我的KendoUI jquery网格中使用它，可以过滤分钟。

{ field: "CREATEDATE", 
  title: "Created",
  format: "{0:dd/MM/yy hh:mm tt}",
  width: "150px",
  template: "#= kendo.toString(kendo.parseDate(CREATEDATE, 'yyyy-MM-dd hh:mm tt'), 'dd/MM/yyyy hh:mm tt') #" },

Answer 4

我意识到这是一篇很老的帖子，似乎已经解决了，但当我遇到这个问题时，我偶然发现了这个问题，并为你问题的第二部分找到了一个更简单的解决方案：＆＃34; 我可以进行排序使用不同的字段。＆＃34; KendoUI数据网格有configuration，支持此功能。

例如，如果我在网格中有一个列，显示上次更改了哪一行以及更改了它的日期（例如＆＃34; John Doe - 7/20/16 10:30 AM＆＃34;，请参阅＆＃39;在代码示例中更改了详细信息）当用户对列进行排序时我只希望对日期时间方面进行排序，我可以这样做：

    gridColumns: [
                { field: 'title', title: 'Title' },
                { field: 'changedByDetail', title: 'Changed'
                    , sortable: {
                        compare: function (a, b, desc){
                            if (a.changedDateTime < b.changedDateTime) {
                                return -1;
                            }
                            else if (a.changedDateTime > b.changedDateTime) {
                                return 1;
                            }
                            return 0;
                        }
                    }
                }
            ]

在这种情况下，我的网格数据源包含＆lt; changedDateTime＆＃39;中的日期时间。在我的例子中的字段。如果它没有，你可能会使用字符串解析函数从字符串中去除日期时间，转换为日期并进行比较。

希望这有助于某人！

在Kendo Grid中过滤/排序DateTime列

4 个答案: