【Angular】カレンダーから日付を入力できるようにする

よく見かけるものとして何かしらの日付を入力するときに、入力フィールドの右側にあるカレンダーみたいなアイコンをクリックするとカレンダーが表れて、クリックした日付が入力フィールドに入力されている、というものがあります。
これは日付ピッカーとか呼ばれるもので、最近は日付を入力するときにはほぼ絶対使われているものです。
今回はこれの作り方を紹介していきます。

スポンサーリンク

app.module.tsにインポートを追記

app.module.tsに追記していきましょう。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MatButtonModule,
    MatIconModule,
    MatButtonToggleModule,
    MatNativeDateModule,
    MatDatepickerModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

日付ピッカーはMatDatepickerModuleによって使えるようになるんですが、これを使うためにMatNativeDateModule、BrowserAnimationsModuleもインポートしておく必要があります。

実際に日付ピッカーを作ってみる

コンポーネントのHTMLを実際に修正してみましょう。

<div>
    <p>カレンダーを表示していく</p>
    <input [matDatepicker]="DatePicker" placeholder="日付選択" >
    <mat-datepicker-toggle matSuffix [for]="DatePicker"></mat-datepicker-toggle>
    <mat-datepicker #DatePicker></mat-datepicker>
</div>

大まかにいうと3つの部分で作られています。<input><mat-datepicker-toggle><mat-datepicker>の3つのタグです。
<input>が日付を入力する入力フィールド、
<mat-datepicker-toggle>が入力フィールド右に表示されるカレンダーっぽいアイコン、
<mat-datepicker>が表示されるカレンダーになります。
この3つが連動することで日付ピッカーは実装されているので、今回「DatePicker」と指定しているタグのIDはこの3つで同じものを指定するようにしてください。ここを間違えると、連動がうまくいかなくなります。

画面表示を確認

ではこの状態で画面に表示してみましょう。

ここで右にあるカレンダーのアイコンをクリックしてみましょう。

表示されたカレンダーから適当な日付を選択してみましょう。

選択した日付が入力フィールドに入っています。
これがよく見る日付を入力するフォームの作り方になります。

終わりに

Angular Materialによって3行くらい書けば簡単に日付ピッカーが作れますね。
昔新入社員で研修受けていた時、Javascriptだけで色々実装していた時に比べて本当に楽になって楽しい限りです。
Angularには他にも便利機能があるので、今後も紹介していきます。

スポンサーリンク

Angular開発

Posted by 社畜林檎