Angular Material - Datepicker 从所选值中获取一个月的最大值答案

【问题标题】：Angular Material - Datepicker make max value a month from selected valueAngular Material - Datepicker 从所选值中获取一个月的最大值
【发布时间】：2018-08-28 15:29:24
【问题描述】：

我有两个日期选择器。一个选择“fromDate”，另一个选择 “迄今为止”。我不让用户先选择 fromDate，并且 toDate 的最大值应该是 fromDate 的一个月。

最大值将禁止用户选择距 startDate/fromDate 超过 30 天的日期。

Angular 材料文档#datevalidation https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings

HTML：

<mat-form-field class="datepicker">
        <input matInput [matDatepicker]="frompicker" placeholder="from" [formControl]="fromDate">
        <mat-datepicker-toggle matSuffix [for]="frompicker"></mat-datepicker-toggle>
        <mat-datepicker #frompicker></mat-datepicker>
      </mat-form-field>

      <mat-form-field class="datepicker">
        <input matInput [max]="maxDate" [matDatepicker]="topicker"  placeholder="to" [formControl]="toDate">
        <mat-datepicker-toggle matSuffix [for]="topicker"></mat-datepicker-toggle>
        <mat-datepicker #topicker></mat-datepicker>
      </mat-form-field>

Ts 文件：

  setMaxDateForCalender(){

    let fullyear = this.datePipe.transform(this.fromDate.value, "yyyy");

    this.maxDate = new Date();
    this.maxDate.setDate(this.fromDate.value.getDate());
    this.maxDate.setMonth(this.fromDate.value.getMonth() + 1);
    this.maxDate.setFullYear(Number(fullyear));

    console.log("Max Date After: " + this.datePipe.transform(this.maxDate, this.dateFormat));
  }

我尝试了不同的方法来执行此操作，但在选择 fromDate 后似乎不会触发最大值。

【问题讨论】：

标签： angular datepicker angular-material

【解决方案1】：

你使用的是 Reactive form、formControl 还是 ngModel？你在哪里调用函数 setMaxDateForCalendar()？

//if you're using ReactiveForm
..AFTER you create the form...
this.myForm.get('fromDate').valueChanges
        .subscribe((date:any) => {
            ..use "date", NOT this.myForm.value.fromDate
        })

//If this.fromDate is a FormControl use
this.fromDate.valueChanges
        .subscribe((date:any) => {
            ..use "date", NOT this.fromDate.value
        })

【讨论】：