如何在Angular 6中向mat-calendar添加maxdate和mindate

Question

我正在使用Angular 6的Material Design mat-calendar组件。 我参考了下面的示例。 https://stackblitz.com/edit/angular-mat-calendar?file=src%2Fapp%2Fapp.component.html 但是在mat-calendar中如何设置最小值和最大值属性。

 <mat-calendar [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>

我正在尝试像这样添加，但是它没有起作用。

<mat-calendar [selected]="selectedDate" (selectedChange)="onSelect($event)" [min]="mindate" [max]="maxdate"></mat-calendar>

但是这里出现了错误：“无法绑定到'min'，因为它不是'mat-calendar'的已知属性。”

有人可以帮我解决吗？

- ananya

Answer 1

您需要使用[minDate]而不是[min]，同样地，[maxDate]

在HTML中：

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

组件名称：

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

https://stackblitz.com/edit/angular-mat-calendar-pauykr?file=src%2Fapp%2Fapp.component.html

- arun kumar

---

谢谢你...非常感激！ - danbord

Answer 2

你可以像这样尝试

**TS**

minDate = new Date(2017, 0, 1);

**HTML**

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

希望它能对你有所帮助

- Yash Rami

---

这个不起作用。在控制台中抛出错误。 “无法绑定到'min'，因为它不是'mat-calendar'的已知属性。” @yash Rami - ananya