Angular Material Daterangepicker（10分で作る日付範囲付きカレンダー）

Date range pickerの使用法

変更するファイルは、
cmaterial.module.ts
app.module.ts
app.component.ts
app.component.html
app.component.css
です。

cmaterial.module.tsファイルは、
Angular Material Datepickerの基本（10分でカレンダー作成）の、
cmaterial.module.tsと同じになります。

モジュールは、Datepickerに使っていた、
MatFormFieldModule、
MatInputModule、
MatDatepickerModule、
MatNativeDateModule、
が入っています。

  
import { NgModule } from "@angular/core";
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({
 exports:[ MatFormFieldModule,
               MatInputModule,
               MatDatepickerModule,
        　    MatNativeDateModule
          ]
})
export class CmaterialModule{}  
  

app.module.tsファイルは、
今回変更します。
ReactiveFormsModuleと、
MAT_FORM_FIELD_DEFAULT_OPTIONをインポートします。

ReactiveFormsModuleは、
時間とともに値が変わるフォーム入力を処理するときに使用します。

MAT_FORM_FIELD_DEFAULT_OPTIONは外観設定に使用します。
appearance: 'fill'には、fillのほかoutline、standardなどが入ります。
app.module.tsではfillにしておき、
app.component.htmlでoutlineに変えることが出来ます。

  
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CmaterialModule } from './cmaterial.module';
//追加コード
import { ReactiveFormsModule} from '@angular/forms';
import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';

@NgModule({
  declarations: [
    AppComponent,
   ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CmaterialModule,
    //追加コード
    ReactiveFormsModule 
  ],
  bootstrap: [AppComponent],
  //変更コード
  providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },]
})
export class AppModule { }
  

次はapp.component.tsファイルです。
FormGroupとFormControlをインポートします。
コンストラクタでFormGroupを使用、
campaignOneを定義します。
campaignOneでスタートの日と、
終了の日を設定します。

  
import { Component } from '@angular/core';
//追加コード
import {FormGroup, FormControl} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'exe-app';
  
  //追加コード
  campaignOne: FormGroup;
  
  constructor() {
    const today = new Date();
    const month = today.getMonth();
    const year = today.getFullYear();

    this.campaignOne = new FormGroup({
      start: new FormControl(new Date(year, month, 13)),
      end: new FormControl(new Date(year, month, 16))
    }); 

}  
  

次はapp.component.htmlファイルです。

mat-form-fieldタグの中に、
mat-label、mat-date-range-input、
mat-datepicker-toggle、mat-date-range-picker が入ります。

mat-date-range-inputの箇所は、
Angular Material Datepickerの基本（10分でカレンダー作成）では、
matInput でした。

  
<mat-form-field class="form-field" appearance="fill">
  <mat-label>First campaign</mat-label>
  <mat-date-range-input
    [formGroup]="campaignOne"
    [rangePicker]="campaignOnePicker"
    [comparisonStart]="campaignOne.value.start"
    [comparisonEnd]="campaignOne.value.end">
    <input matStartDate placeholder="Start date" formControlName="start">
    <input matEndDate placeholder="End date" formControlName="end">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
</mat-form-field> 
  

app.component.cssファイルでは、
form-fieldのマージンを定義しています。
左から順に、 margin-top margin-right margin-bottom margin-left
の値が入ります。

  
.form-field {
    margin: 0 8px 16px 0;
  } 
  

今回は以上です。