如何在 Angular Kendo Grid 中格式化日期答案

【问题标题】：How to format date in Angular Kendo Grid如何在 Angular Kendo Grid 中格式化日期
【发布时间】：2018-10-17 11:33:42
【问题描述】：

我在 Angular Kendo Grid 上工作，我正在获取格式的服务器数据

1900-01-01T00:00:00

但我希望它以标准格式显示，不知道该怎么做。我在网格列中应用了 format='{0:MM/dd/yyyy h:mm a}' 但没有效果。无论要做什么数据格式转换，我都需要在代码的客户端进行，即服务器日期到 javascript 格式！！

<kendo-grid-column field="mydata.openDate" width="220" title="Open Date" filter="date" 
                   format='{0:MM/dd/yyyy h:mm a}'>
</kendo-grid-column>

【问题讨论】：

请参考此链接：stackblitz.com/edit/angular-s6xzee?file=app/app.component.ts

标签： kendo-grid angular-kendo

【解决方案1】：

试试这个：

<kendo-grid-column field="dateField" width="220" title="Open Date">
    <ng-template kendoGridCellTemplate let-dataItem>
        {{dataItem.dateField | date: 'MM/dd/yyyy'}}
    </ng-template>
</kendo-grid-column>

您也可以使用angular Date Pipe提供的短格式或其他格式

【讨论】：

更正日期管道格式。小写 m 指的是 datetime 对象中的分钟。在这种情况下，我们应该使用大写 M。 {{dataItem.dateField |日期：'MM/dd/yyyy'}}

【解决方案2】：

如果你有一个大项目并且你必须多次使用相同的格式，那么指令就是要走的路。

这对于可用性非常重要，以防您决定更改使用的格式（维护）

import { Directive, OnInit } from '@angular/core';
import { ColumnComponent } from '@progress/kendo-angular-grid';

@Directive({
  selector: '[kendo-grid-column-date-format]'
})
export class KendoGridColumnDateFormatDirective implements OnInit {
  constructor(private element: ColumnComponent) {
  }

  ngOnInit() {
    this.element.format = "{0:dd.MM.yyyy}";
  }  
}

你可以这样使用它

<kendo-grid-column field="yourField"
                   title="your title"
                   kendo-grid-column-date-format>
</kendo-grid-column>

超级重要别忘了注册指令

【讨论】：

【解决方案3】：

Grid 数据需要包含实际的 JavaScript Date 对象，而不是一些字符串表示。然后内置的格式化、排序、过滤和编辑会这样处理日期并按预期工作：

Docs

映射数据，使其包含实际日期。

示例：

String Date

【讨论】：