时间戳

首页 > 解决方案 > 最小日期和最大日期不起作用 角度材料范围输入

angular - 最小日期和最大日期不起作用 角度材料范围输入

问题描述

我有这个简单的形式，它是角度材料的范围输入。但是 [min] 和 [max] 日期不起作用。我试图输入第一个输入，第二个输入，然后两个输入，但没有任何效果。我留下我的代码

 <mat-form-field appearance="outline" class="w-100">
        <mat-date-range-input [rangePicker]="picker" >
          <input matStartDate placeholder="Start date" formControlName="start" [min]="minDate" 
           [max]="maxDate">
          <input matEndDate placeholder="End date" formControlName="end" [min]="minDate" 
           [max]="maxDate">
        </mat-date-range-input>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-date-range-picker #picker></mat-date-range-picker>
      </mat-form-field>

我试图让最大值在同一天，我的意思是今天。

export class DateComponent implements OnInit, {
  minDate: Date;
  maxDate: Date;
 constructor(private formBuilder: FormBuilder) {
    const currentYear = new Date().getFullYear();
    this.minDate = new Date(currentYear - 20, 0, 1);
    this.maxDate = new Date();
    }
}

但它不起作用。

标签： angulardateangular-material

解决方案

Stackblitz：https ://stackblitz.com/edit/angular-g3nnqx?file=src/app/datepicker-min-max-example.html

<mat-form-field appearance="fill" >
        <mat-date-range-input [rangePicker]="picker" [min]="minDate" 
           [max]="maxDate" >
          <input matStartDate placeholder="Start date"    >
          <input matEndDate placeholder="End date"   >
        </mat-date-range-input>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-date-range-picker #picker></mat-date-range-picker>
      </mat-form-field>

当您使用时，rangePicker您无法应用min和max输入这些是特定的选择器级别。你必须像你设置的那样设置rangePicker

更多参考细节：https ://material.angular.io/components/datepicker/overview

推荐阅读