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

以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

Answer 2

实际上，您已经用anil的答案更改了堆叠闪电战。所以我正在更新可能出错的地方。您应该分别为min和max创建两个不同的日期对象。

 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：Farhat赛车了我：P。我没看到。

Answer 3

以下是日期选择器的示例，它可以帮助您：StackBlitz HERE

素材日历如何选择最大和最小日期？

3 个答案: