首页 > 解决方案 > 如何使用 matdatepicker 在组件类中以角度打印日期值

问题描述

 <mat-form-field appearance="outline" [floatLabel]="'auto'">
           <mat-label>Birth Date</mat-label>
           <input matInput       [matDatepicker]="birthDatePicker"formControlName="dateOfBirth"(dateChange)="getEndDate()">
          <mat-datepicker-toggle matSuffix [for]="birthDatePicker"></mat-datepicker-toggle>
    <mat-datepicker #`enter code here`birthDatePicker>
    </mat-datepicker>
 </mat-form-field>

**在component.ts中**

getEndDate(){ console.log(this.personForm.controls['dateOfBirth'].value);

标签: angularangular-materialangular8

解决方案


您可以使用 NgModel 访问日期。在您的 html 文件中:

<mat-form-field>
<input matInput [matDatepicker]="dp3" placeholder="Date" 
readonly [(ngModel)]="selectedDate"
(dateChange)="getDate(selectedDate)">
<mat-datepicker-toggle matSuffix [for]="dp3"></mat- 
datepicker-toggle>
<mat-datepicker #dp3 disabled="false" 
[startAt]="selectedDate" startView="month"></mat-datepicker>
  </mat-form-field>

在您的 .ts 文件中

selectedDate: Date = new Date();
getDate(date){
    console.log(date);
}

尝试这个。


推荐阅读