如何在 Angular Kendo 网格中格式化日期

Question

我在 Angular Kendo 网格上工作，我正在获取

格式的服务器数据

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>

Answer 1

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

Docs

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

示例：

String Date

Answer 2

试试这个：

<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

提供的短格式或其他格式

Answer 3

如果您有一个大项目，并且必须多次使用相同的格式，那么指令是可行的方法。

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

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>

超重要别忘了注册指令

如何在 Angular Kendo 网格中格式化日期

How to format date in Angular Kendo Grid

kendo-grid

angular-kendo