Минимальная дата и максимальная дата не работают при вводе углового диапазона материалов

#angular #date #angular-material

#угловой #Дата #угловой-материал

Вопрос:

У меня есть эта простая форма, которая представляет собой ввод диапазона из angular material. Но [минимальная] и [максимальная] даты не работают. Я попытался ввести первый ввод, второй ввод, а затем оба из них, но ничего не работает. Я оставляю свой код

  <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();
    }
}
  

Но это не работает.

Ответ №1:

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