Блог

В Angular-12 я использую Material datepicker для даты рождения:

Компонент:

 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 amp;amp; fp.dob.invalid">
    <div *ngIf="fp.dob.hasError('required')">
      <div class="text-danger">
        Date of Birth is required!
      </div>
    </div>
  </div>
</div> 

Я хочу установить минимальную дату на 18 лет, чтобы любой кандидат моложе 18 лет не смог зарегистрироваться.

Как мне этого добиться?

Спасибо

Если вы хотите ограничить его 18-летними. На самом деле вы хотите установить максимальную сегодняшнюю дату минус 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

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

Используйте [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>
 

Вот рабочая демонстрация