Angular

Question

在 Angular-12 中，我使用 Material 日期选择器作为出生日期：

组件：

tomorrow = new Date();
constructor(
  private router: Router,
) {
  this.tomorrow.setDate(this.tomorrow.getDate());
}

HTML

<div class="col-12 col-md-6">
  <label for="dob">Date of Birth:<span style="color:red;">*</span></label>
  <div class="form-group">

    <mat-form-field fxFlex="100%" fxFlex.gt-sm>
      <input matInput [matDatepicker]="dob" placeholder="Choose a date" [max]="tomorrow" formControlName="dob" readonly required>
      <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
      <mat-datepicker #dob></mat-datepicker>
    </mat-form-field>
  </div>
  <div *ngIf="fp.dob.touched && fp.dob.invalid">
    <div *ngIf="fp.dob.hasError('required')">
      <div class="text-danger">
        Date of Birth is required!
      </div>
    </div>
  </div>
</div>

我想将最低日期设置为 18 岁，这样任何未满 18 岁的候选人将无法注册。

如何实现？

谢谢

Answer 1

使用 [max] 计算日期选择器的最大值。

组件

 export class DatepickerMinMaxExample implements OnInit {
  maxDate: Date;
  date: Date;
  ngOnInit(): void {
    this.maxDate = new Date();
    this.maxDate.setMonth(this.maxDate.getMonth() - 12 * 18);
  }
}

模板

<mat-form-field class="example-full-width">
  <input matInput #input="ngModel" [(ngModel)]="date" [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
  <mat-error *ngIf="input.hasError('matDatepickerMax')">Date should be inferior</mat-error>
</mat-form-field>

这是一个Working Demo

Answer 2

如果你想限制18岁。您实际上想将 max 设置为今天的日期减去 18 年，而不是最小值。

在你的组件构造函数中是这样的（尽管我建议你对组件使用 ngOnInit 而不是）。

maxDob: Date;
constructor(
  private router: Router,
) {
  const today = new Date();
  this.maxDob = new Date(
    today.getFullYear() - 18,
    today.getMonth(),
    today.getDate()
  );
}

并确保也更改您的 html

<input matInput [matDatepicker]="dob" placeholder="Choose a date" [max]="maxDob" formControlName="dob" readonly required>

这是一个使用 ngOnInit 的 stackblitz 示例

https://stackblitz.com/edit/angular-material-4erepd?file=app/app.component.ts

Angular - 如何将 Angular Material datepicker 出生日期设置为最大 18 年

Angular - How to set Angular Material datepicker Birth Date to max of 18 years

angular-material