Angular 8:mat-datepicker问题。我尝试使用[startAt]禁止选择今天之前的日期

时间:2019-11-14 14:10:08

标签: angular datepicker disable mat-datepicker

我有两个Angular 8形式的日期选择器。我想禁用使用表格之前的日期。但我找不到解决方案。默认情况下,所选日期是今天的日期,但是我仍然可以选择过去的日期。

在create-project.component.html中:

<mat-form-field>
  <mat-label for="date">Starting date</mat-label>
  <input matInput [matDatepicker]="date" placeholder="Choose a starting date" formControlName="date">
  <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
  <mat-datepicker #date [startAt]="startDate"></mat-datepicker>
  <mat-error *ngIf="form.controls['date'].invalid">{{getErrorMessage('date')}}</mat-error>
</mat-form-field>

在ts中:

export class CreateProjectComponent implements OnInit {
  startDate = new Date();
}

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

不要在mat-datepicker上使用startAt,而是在输入标记中使用min。

.html

<mat-form-field>
  <mat-label for="date">Starting date</mat-label>
  <input matInput [matDatepicker]="date" [min]="startDate" placeholder="Choose a starting date" formControlName="date">
  <mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
  <mat-datepicker #date></mat-datepicker>
  <mat-error *ngIf="form.controls['date'].invalid">{{getErrorMessage('date')}}</mat-error>
</mat-form-field>