【Angular】Angular MaterialのDatePickerで日本語表示をする

Angular MaterialのDatePicker でカレンダーを日本語表示させるメモ。

環境

• Angular 14
  • 試したのがこのバージョンなだけで、過去のバージョンでも対応方法は変わらなそう。

インストール

1. Angularプロジェクト上で angular/material をインストールする

ng add @angular/material

1. app/app.module.ts に必要なファイルのimportを追加する

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core';

@NgModule({
  imports: [
    (省略)
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  (省略)
})

1. 任意のComponentにサンプルの記述を貼り付ける(今回はapp/app.component.ts )

<input matInput [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

デフォルトでは下記のように英語のカレンダーが表示される

ロケールを変更する

まずは対象のComponentのProviderを上書きしてカレンダーのロケールを変更する。

import { DateAdapter, NativeDateAdapter } from '@angular/material/core';

export class AppComponent {
  constructor(dateAdapter: DateAdapter<NativeDateAdapter>) {
    dateAdapter.setLocale('ja-JP');
  }
}

すべての日付に 日 がつくものの、日本語表記になっている

日付表示を変更する

1. 日付表示を変更するためにProviderで上書きするためのAdapterを作成

export class MyDateAdapter extends NativeDateAdapter {
    override getDateNames(): string[] {
        return [...Array(31).keys()].map(i => String(i + 1));
    }
}

1. Adapterを適用する

providers: [{provide: DateAdapter, useClass: MyDateAdapter}],

日が取れて直感的な表記になった

サンプル

https://stackblitz.com/edit/angular-ivy-f6sxt1?file=src/app/app.component.ts