Kendo UI 网格日期时间列答案

【问题标题】：Kendo UI grid datetime columnKendo UI 网格日期时间列
【发布时间】：2012-12-13 14:31:16
【问题描述】：

我想在我的 Kendo UI 网格中有一个 DateTime 列。我在论坛上搜索过，但没有找到解决此问题的方法。

TimeStamp 列的字段定义如下：

TimeStamp: { type: "date" },

记录根据模板中指定的格式显示数据。但我希望能够更精确地过滤我的数据源。但是，目前我的过滤器只能按日期过滤。有没有办法按DateTime 过滤而不是仅按日期过滤？

【问题讨论】：

您目前不能使用日期和时间 - 只能使用日期。列的格式不会传播到过滤器菜单中的日期选择器。
我完全确定是这种情况，但感谢您的确认。你能告诉我这个功能的实现是否计划在未来的版本中？我知道目前不支持此功能，但 Kendo UI 会支持更精确的日期时间过滤器吗？我应该把这个想法放到论坛上吗？此外，如果您编辑您的答案以包含在 Kendo UI 中当前不支持 DateTime 过滤器的信息，我将支持并接受您的答案。

标签： grid filtering kendo-ui

【解决方案1】：

我被告知，目前这在 Kendo UI 中是不可能的。我知道这是个坏消息，但这是我问题的答案。

【讨论】：

哇，太糟糕了。很多。我刚刚迁移了一个 Web 服务并设置了一个专门用于使用 KendoUI 网格的 json 端点，现在我必须将预先格式化的 DateTimes 作为字符串返回。不是世界上最大的问题，但同样令人沮丧。
@millie，那是一年前的事了。也许他们从那时起就解决了这个问题。
我的评论距离答案只有一个半月左右，但问题已经解决。唯一的问题是默认日期和时间选择器由两个看起来像一个的单独按钮激活。不过，这很容易解决。 demos.kendoui.com/web/grid/filter-menu-customization.html

【解决方案2】：

您可以在剑道网格列上使用模板，再创建一个属性并将该属性传递到剑道网格列的模板中。

喜欢

timeStamp: { type: "date" },
timeStamp1: { type: "String" },

在模板中传递时间戳1，如

  {
    title: "Last Login",
    width: 80,
    template: '<span>#= timeStamp1#</span>',
    field: "timeStamp",
    type: "date"                               
  },

它可以根据您的要求正常工作，并且排序将像数据库排序一样正常工作。

【讨论】：

感谢您的回答，但这回避了问题。在大多数情况下，将日期时间过滤为字符串不会给出正确的结果，这也会增加您的 http 请求大小。

【解决方案3】：

它的可能：

DeliveredDate: {
                type: "datetime",
                editable: false,
                nullable: false
            }

模板是：

            {
                field: "DeliveredDate",
                title: "Delivered Date",
                template: '#= kendo.toString(data.DeliveredDate,"dd/MM/yyyy") === null ? "--/--/----" : kendo.toString(data.DeliveredDate,"dd/MM/yyyy HH:mm") + " Hrs" #',
                width: 60,
                groupable: false,
                sortable: true,
                filterable: true
            }

【讨论】：

【解决方案4】：

从您的 KendoGrid 数据库中获取时间戳格式数据的最简单方法。

在您的 HTML 文件中，使用来自 DB 的数据，如图所示。

<kendo-grid [data]="gridData"> 
    <kendo-grid-column class="CreatedAt" field="CreatedAt" title="title"
     [width]="120" [headerStyle]="{'background-color': '#36455a','color': '#fff'}"
     [style]="{'background-color': '#36455a','color': '#fff'}">
          <ng-template kendoGridCellTemplate let-dataItem>
             {{dataItem.CreatedAt | date:"yyyy/MM/dd HH:mm:ss"}}
          </ng-template>
    </kendo-grid-column>
</kendo-grid>

PS：gridData 是我的 var 存储数据库中的数据。 CreatedAt 是其中一个字段。

【讨论】：