web-dev-qa-db-ja.com

Angular Kendo Gridで日付をフォーマットする方法

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>
kendo-gridangular-kendo
6
Toxic

大規模なプロジェクトがあり、同じ形式を複数回使用する必要がある場合は、ディレクティブが適しています。

これはユーザビリティにとって非常に重要であり、使用するフォーマットを変更することにした場合（メンテナンス）

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>

非常に重要なディレクティブを登録することを忘れないでください

2
Hakan Fıstık

グリッドデータには、一部の文字列表現ではなく、実際のJavaScript Dateオブジェクトを含める必要があります。次に、組み込みの書式設定、並べ替え、フィルタリング、および編集により、日付がそのように扱われ、期待どおりに機能します。

ドキュメント

実際の日付が含まれるようにデータをマッピングします。

例：

文字列日付

0
saumil_jariwala