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

Question

我正在使用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>

Answer 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>

您还可以使用角度日期管道提供的简短格式或其他格式

Answer 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>

超级重要不要忘记注册指令

Answer 3

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

文档

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

例子：

字符串 日期