Угловой материал - Datepicker делает максимальное значение в месяц из выбранного значения - PullRequest
Новая
       7

Угловой материал - Datepicker делает максимальное значение в месяц из выбранного значения

0 голосов
/ 28 августа 2018

У меня есть два сборщика дат. Один, чтобы выбрать «fromDate», а другой, чтобы выбрать "на свидание". Я исключаю, что пользователь сначала выберет fromDate, а toDate должно иметь максимальное значение в месяц из fromDate.

Максимальное значение запретит пользователям выбирать дату более 30 дней из startDate / fromDate.

Угловой материал документа # дата проверки 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.

1 Ответ

0 голосов
/ 28 августа 2018

Используете ли вы 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
        })
...