Материал календаря, как выбрать максимальную и минимальную дату?

Question

Я использую календарь материалов, и я хочу, чтобы пользователь выбирал только дату одного месяца.Я использую minData и maxDate поле.minDate работает, но maxDate не работает.

exmple.component.html

<mat-calendar [selected]="selectedDate" (selectedChange)="onCalendarSelectedChange($event)" [minDate]="today" [maxDate]="maxDate"></mat-calendar>

Вот указанная ссылка:

https://angular-pknsri.stackblitz.io

Пожалуйста, помогите мне.

Answer 1

На самом деле у вас есть изменения в стеке с ответом анила.Поэтому я обновляю то, что могло пойти не так.Вы должны создать два разных объекта даты отдельно для минимальной и максимальной.

 var minCurrentDate = new Date();
    var maxNewDate = new Date();
    this.minDate = minCurrentDate;
    this.maxDate  = maxNewDate.setMonth(maxNewDate.getMonth()+1);

    // this.minDate = new Date(2000, 0, 1);
    // this.maxDate = new Date(2020, 0, 1);
    console.log(this.maxDate, minCurrentDate,maxNewDate, maxNewDate.getMonth());

Когда вы сделали setMonth () для текущей даты, вы также изменили ссылку для минимальной даты.Ваши minDate и max date указывали на одно и то же.После того, как все объекты были одинаковыми, изменились только ссылки.Так что попробуйте создать два разных объекта и проверьте.

PS: Фархат гонял меня: P.Я этого не видел.

Answer 2

Вот пример средства выбора даты, которое может вам помочь: StackBlitz ЗДЕСЬ

Answer 3

в html

<mat-form-field class="example-full-width">
  <input matInput [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-form-field>

в ts файле

 minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);

Ссылка https://material.angular.io/components/datepicker/examples