物料日历如何选择最大和最小日期？答案

【问题标题】：Material calendar how to select max and min date?物料日历如何选择最大和最小日期？
【发布时间】：2019-05-27 22:20:39
【问题描述】：

我正在使用材料日历，我希望用户只选择一个月的日期。我使用minData 和maxDate 字段。 minDate 工作但maxDate 不工作。

example.component.html

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

这是给定的链接：

https://angular-pknsri.stackblitz.io

请帮帮我。

【问题讨论】：

请在stackblitz.com分享一个最小的可重现示例
您标记了 angular-material，但它只有 datepicker。那么您使用的是哪个库？
@FarhatZaman angular-pknsri.stackblitz.io 请检查。
@KiraAG angular-pknsri.stackblitz.io 请检查。
@SampatSingh 你能给我们stackblitz链接的编辑模式吗？

标签： javascript angular angular-material material-design

【解决方案1】：

这是一个可以帮助您的日期选择器示例：StackBlitz HERE

【讨论】：

【解决方案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。我没看到。

【讨论】：

哈哈哈没问题伙计，没关系，毕竟我们都是来帮助别人的。

【解决方案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

【讨论】：