Блог

Я пытаюсь запустить функцию, когда пользователь выбирает диапазон дат в MatDateRangePicker. https://material.angular.io/components/datepicker/api

Вот stackblitz https://stackblitz.com/edit/angular-gxbc8x?file=src/app/date-range-picker-overview-example.html

Но ничего не происходит, событие не запускается при выборе диапазона дат. Как я могу подключить функцию hello (), когда пользователь выбирает диапазон дат?

Вам нужно использовать dateChange в качестве привязки события внутри ввода и внести условие в ваш TS-файл, я обновил код, пожалуйста, посмотрите —

https://stackblitz.com/edit/mat-date-range-input?file=src/app/date-range-picker-overview-example.html

Я решил это с помощью

 (dateChange)="onPeriodOfPerfomanceChanged($event)"
  

Пример:

     <div>
      <mat-form-field appearance="fill" color="warn">
        <mat-label>Leistungszeitraum</mat-label>
        <mat-date-range-input
          [rangePicker]="invoicePeriodRangePicker">
          <input matStartDate placeholder="Start date">
          <input (dateChange)="onPeriodOfPerfomanceChanged($event)" matEndDate placeholder="End date">
        </mat-date-range-input>
        <mat-datepicker-toggle [for]="invoicePeriodRangePicker" matSuffix></mat-datepicker-toggle>
        <mat-date-range-picker #invoicePeriodRangePicker></mat-date-range-picker>
      </mat-form-field>
    </div>
  

И аналог TS

   onPeriodOfPerfomanceChanged($event: any) {
    console.log("Changed......."   $event)
  }