IgxGrid dataType=”‘date'”の列で編集時の日付書式を設定する。

セル編集テンプレートを使用してigx-date-pickerを埋め込み、そこでformatとmaskを指定してください。

<igx-column [field]="'Birthday'" [header]="'Birthday'" dataType="date" [editable]="true">
  <!-- 省略 -->
  <ng-template igxCellEditor let-value let-cell="cell">
    <igx-date-picker
      mode="dropdown"
      format="yyyy/MM/dd"
      mask="yyyy/MM/dd"
      [labelVisibility]="false"
      [(ngModel)]="cell.value">
    </igx-date-picker>
  </ng-template>
</igx-column>

　

実行結果

　

サンプル

　

リファレンス

• セル編集テンプレート
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid#%E3%82%BB%E3%83%AB%E7%B7%A8%E9%9B%86%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/cell-editing#%E3%82%BB%E3%83%AB%E7%B7%A8%E9%9B%86%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88
• IgxDatePicker – maskとformat
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/date-picker#%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%83%80%E3%82%A6%E3%83%B3-%E3%83%A2%E3%83%BC%E3%83%89