Angular Material日期选择器如何设置出生日期最大可选为18年前

解决方案 #

你只需要调整组件的日期计算逻辑，替换原有最大可选日期的绑定值，同时补充表单校验避免前端限制被绕过即可，具体改动如下：

1. 修改组件TS代码

替换原有tomorrow相关逻辑，计算18年前的合法最大出生日期，同时补充自定义年龄验证器：

import { AbstractControl, Validators, FormBuilder } from '@angular/forms'; // 缺失的类型从这里导入

export class YourComponent {
  // 存储出生日期的最大可选值
  maxDob: Date;

  // 自定义验证器：校验年龄是否满18周岁
  minAgeValidator(control: AbstractControl): { [key: string]: boolean } | null {
    if (control.value) {
      const birthDate = new Date(control.value);
      const eighteenYearsAgo = new Date();
      eighteenYearsAgo.setFullYear(eighteenYearsAgo.getFullYear() - 18);
      if (birthDate > eighteenYearsAgo) {
        return { 'minAge': true };
      }
    }
    return null;
  }

  constructor(
    private router: Router,
    private fb: FormBuilder
  ) {
    // 计算距今18年前的日期
    const today = new Date();
    this.maxDob = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate());

    // 初始化表单时给dob字段加上自定义验证器，原有其他字段逻辑不变
    this.yourForm = this.fb.group({
      // ... 其余表单字段配置
      dob: [null, [Validators.required, this.minAgeValidator]]
    });
  }

  // ... 其余组件逻辑
}

2. 修改HTML模板

调整matInput的[max]绑定对象，同时补充年龄不符合要求的错误提示：

<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>
      <!-- 将原[max]绑定的tomorrow替换为maxDob -->
      <input matInput [matDatepicker]="dob" placeholder="Choose a date" [max]="maxDob" 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">
        请选择出生日期！
      </div>
    </div>
    <!-- 新增不满18周岁的错误提示 -->
    <div *ngIf="fp.dob.hasError('minAge')">
      <div class="text-danger">
        注册需年满18周岁！
      </div>
    </div>
  </div>
</div>

改动完成后，日期选择器会自动将18年内的日期置灰不可选，同时表单校验会做二次拦截，即使用户通过浏览器调试工具绕过前端选择限制，提交时也会触发错误提示。

内容的提问来源于stack exchange，提问作者user11352561