IgxDatePicker 編集中の”_”を”0″に変更したい

IgxDatePickerは、編集中、未入力部分には”_”が表示されるのですが、それを”0″に変更したい場合は、IgxDatePickerにng-templateを埋め込み、その中のinputタグに対してIgxMaskをのpromptCharで”0″を指定してください。

<!-- テンプレート側 (app.component.html) -->
<igx-date-picker [value]="currentDate" mode="dropdown">
  <ng-template igxDatePickerTemplate 
               let-openDialog="openDialog" 
               let-value="value"
               let-displayData="displayData">
    <igx-input-group>
      <input #dropDownTarget igxInput
        [value]="displayData | date:'yyyy/MM/dd'"
        [igxMask]="'0000/00/00'" [promptChar]="'0'"
        (blur)="changeDate($event)"/>
      <igx-suffix (click)="openDialog(dropDownTarget)">
        <igx-icon>event_note</igx-icon>
      </igx-suffix>
    </igx-input-group>
  </ng-template>
</igx-date-picker>

// コード側 (app.component.ts)
public changeDate(event) {
  const input = event.target.value;
  const parsedDate = new Date(input);
  if (this.isDateValid(parsedDate)) {
    this.currentDate = parsedDate;
  } else {
    this.notify();
  }
}

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

　

実行結果

　

サンプル

　

APIリファレンス

• 「IgxDatePicker」→「テンプレート」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/date-picker#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88
• IgxMaskのpromptChar
  • https://jp.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxmaskdirective.html#promptchar