IgxGrid dataType=”‘date'”の列で編集時のマスクの”_”を別の文字に設定する。

1. igx-columnにセル編集テンプレートを使用し、
2. セル編集テンプレートにigx-date-pickerを配置し、
3. igx-date-pickerでさらにng-templateを埋め込み、
4. 3のng-template内のinputタグにIgxMaskを介してpromptCharを設定し、
5. 4のinputタグのblurイベントで、inputタグの値でセルの値を更新
してください。

3と4、および、5の一部は、
「IgxGrid dataType=”‘date’”の列で編集時のマスクの”_”を別の文字に設定する。」
と同じ要領です。

<!-- app.component.html側 -->
<igx-column [field]="'Birthday'" [header]="'誕生日'" dataType="date" [editable]="true">

  <!-- 中略 -->

  <!-- 1. igx-columnにセル編集テンプレートを使用し -->
  <ng-template igxCellEditor let-value let-cell="cell">
    <!-- 2. セル編集テンプレートにigx-date-pickerを配置し -->
    <igx-date-picker #picker [(value)]="cell.editValue" mode="dropdown">
      <!-- 3. igx-date-pickerでさらにng-templateを埋め込み -->
      <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value"
        let-displayData="displayData">
        <igx-input-group>
          <!--
            4. 3のng-template内のinputタグにIgxMaskを介してpromptCharを設定し、
            5. 4のinputタグのblurイベントで、inputタグの値でセルの値を更新
          -->
          <input igxInput [value]="displayData | date:'yyyy/MM/dd'" [igxMask]="'0000/00/00'" [promptChar]="'0'"
            (blur)="changeDate($event, cell)" />
          <igx-prefix (click)="openDialog()">
            <igx-icon>today</igx-icon>
          </igx-prefix>
        </igx-input-group>
      </ng-template>
    </igx-date-picker>
  </ng-template>
</igx-column>

// app.component.ts

// 5. 4のinputタグのblurイベントで、inputタグの値でセルの値を更新
public changeDate(event, cell: IgxGridCellComponent) {
  const input = event.target.value;
  const parsedDate = new Date(input);
  if (this.isDateValid(parsedDate)) {
    cell.editValue = parsedDate;
    cell.value = parsedDate;
  }
}

private isDateValid(date: Date): boolean {
  return (new Date(date).toLocaleString() !== "Invalid Date");
}

　

サンプル