Day12-Angular Material 介紹
Day13-Angular Material: Table
Day15-Angular Material: Select 下拉選單
Day16-Angular Material: Checkbox
Day17-Angular Material: Dialog 彈出視窗

基本的 DatePicker

官方文件

1. imort module

   // material.module.ts(依個人使用習慣)
   import { MatSelectModule } from '@angular/material/select';
   import { MatFormFieldModule } from '@angular/material/form-field';
   
   @NgModule({
     imports: [
       MatSelectModule,
       MatFormFieldModule, 
     ],
   })
   

2. 設定 .html

   <mat-form-field>
     <input matInput [matDatepicker]="picker" placeholder="Choose a date">
     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
   </mat-form-field>
   

3. 成功
   

使用 @angular/forms 控制表單

之後會有一篇介紹 @angular/forms 用法

1. 範例程式碼

   <mat-form-field>
     <input matInput formControlName="mydatePicker" [matDatepicker]="picker" placeholder="Choose a date">
     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
   </mat-form-field>
   

   mydatePicker = new FormControl('');
   

   我自己習慣會使用 FormGroup

   import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
   ...
   export class XXXComponent {
     constructor(
       private aFormBuilder: FormBuilder
     ) { }
   
     Form: FormGroup = this.aFormBuilder.group({
       mydatePicker: [new Date()] // 順便設定了初值
     })
   }
   

選取一段期間的 DatePicker

1. 範例程式碼

   <mat-form-field>
     <mat-label>日期區間</mat-label>
     <mat-date-range-input [rangePicker]="picker1" >
       <input matStartDate formControlName="datePickerStart" placeholder="開始日期"/>
       <input matEndDate formControlName="datePickerEnd" placeholder="結束日期"/>
     </mat-date-range-input>
     <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
     <mat-date-range-picker #picker1></mat-date-range-picker>
   </mat-form-field>
   

   Form: FormGroup = this.aFormBuilder.group({
     datePickerStart: [new Date()],
     datePickerEnd: [new Date()],
   })
   

2. 要取值就使用
   this.Form.get('datePickerStart')?.value
this.Form.get('datePickerEnd')?.value
3. 示意圖
   

對日期設定上下限

今天 09/29、我想設定只能選擇前後一個月的日期：08/29 ~ 10/29。

1. 範例程式碼

   <mat-form-field appearance="outline">
     <mat-label>日期(YYYY/MM/DD)</mat-label>
     <input matInput 
       formControlName="vdate" 
       [matDatepicker]="vdate"
       datePickerFormat="YYYY/MM/DD" 
       [min]="minFromDate" 
       [max]="maxFromDate"
     >
     <mat-datepicker-toggle matSuffix [for]="vdate"></mat-datepicker-toggle>
     <mat-datepicker #vdate></mat-datepicker>
   </mat-form-field>
   

   ngOnInit(){
     this.setDatePickerMinMax();
   }
   
   minFromDate!: Date;
   maxFromDate!: Date;
   setDatePickerMinMax(): void {
     let today = new Date();
     let y =  today.getFullYear();
     let m = today.getMonth();
     let d = today.getDate();
     this.minFromDate = new Date( y , m-1, d ); 
     this.maxFromDate = new Date( y , m+1, d ); 
   }
   

2. 僅能選擇 08/29 ~ 10/29 的日期