Блог

У меня есть DatePickerRange углового материала, и я хочу запустить функцию при изменении значения в DatePicker Я пробовал с функцией (изменить), но это не сработало, я был бы рад вашей помощи, как это сделать. Спасибо!

Это мой html:

 <mat-form-field class="form-field">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
        <input matStartDate formControlName="start" placeholder="Start date">
        <input matEndDate formControlName="end" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>

    <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date
    </mat-error>
    <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date

    </mat-error>
    </mat-form-field>
  

И это функция, которую я хочу активировать:

    @Output() newItemEvent = new EventEmitter<bookedDate>();
      addNewDate() {
        this.dateRange.dateStart = this.range.get('start').value;
        this.dateRange.dateEnd = this.range.get('end').value;
        this.newItemEvent.emit(this.dateRange);
      }
  

Мой подход заключался в добавлении переменных ссылки на шаблон к входным данным для matStartDate и matEndDate . Это dateRangeStart и dateRangeEnd в примере шаблона ниже:

 // Template

<mat-form-field appearance="standard">
  <mat-label>{{reportField.value.label}}</mat-label>
  <mat-date-range-input [rangePicker]="dateRangePicker">
    <input matStartDate
      placeholder="Start date"
      #dateRangeStart>
    <input matEndDate
      placeholder="End date"
      #dateRangeEnd
      (dateChange)="dateRangeChange(dateRangeStart, dateRangeEnd)">
  </mat-date-range-input>
  <mat-datepicker-toggle matPrefix
    [for]="dateRangePicker">
  </mat-datepicker-toggle>
  <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
</mat-form-field>
  

Затем значения этих входных данных могут быть доступны с помощью функции, вызываемой dateChange выходом на matEndDate .

 // Component

dateRangeChange(dateRangeStart: HTMLInputElement, dateRangeEnd: HTMLInputElement) {
  console.log(dateRangeStart.value);
  console.log(dateRangeEnd.value);
}
  

Это позволяет избежать необходимости в dateChange событии на обоих входах.

у меня есть что-то похожее на вашу проблему, это работает для меня, поэтому я надеюсь, что это поможет вам или даст подсказку о решении вот мой html :

 <mat-form-field class="dialogform">
  <mat-label>Duree du Session : </mat-label>
    <input matInput
       required
       placeholder=""
       [satDatepicker]="picker"
       [value]="dateRangeDisp"
       (dateChange)="saveDate($event)"
    >
  <sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
  <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
  </mat-form-field>
  

и функция :

      saveDate(event: any) {
    // look at how the date is emitted from save
    console.log(event.target.value.begin);
    //this.session.dateDebut = event.target.value.begin;
    console.log(event.target.value.end);

    // change in view
     this.dateRangeDisp = event.target.value;


    // save date range as string value for sending to db

    // ... save to db
  }
  

Я сам столкнулся с этой проблемой, вот решение, которое мне помогло: component.ts:

     import * as moment from 'moment';
    import { FormControl, FormGroup } from "@angular/forms";
    import { DateAdapter, MAT_DATE_FORMATS,  MatDateFormats } from "@angular/material/core";
    import {  MomentDateAdapter } from '@angular/material-moment-adapter';
        const CUSTOM_DATE_FORMATS: MatDateFormats = {
        parse: {
            dateInput: 'D/MM/YYYY'
        },
        display: {
            dateInput: 'DD/MM/YYYY',
            monthYearLabel: 'MMMM Y',
            dateA11yLabel: 'LL',
            monthYearA11yLabel: 'MMMM Y'
        }
    };
    @Component({
        providers: [
            {provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS},
            {provide: DateAdapter, useClass: MomentDateAdapter}
        ],
    })
    
        @ViewChild('picker') picker: any;
        dateRange: moment.Moment;
        disabled = false;
        tempDate = new Date().setMonth(new Date().getMonth() - 1);
        range = new FormGroup({
            start: new FormControl(new Date(this.tempDate)),
            end: new FormControl(new Date()),
        });
    
        ngAfterViewInit() {
            this.range.valueChanges.pipe(
                debounceTime(200)
            ).subscribe(event => {
                if (event.start amp;amp; event.end) {
                    this.onDateChanged(event);
                }
            });
        }  

   
    <mat-form-field class="date-range" appearance="fill">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input
    [formGroup]="range"
    [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
    <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
    <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
    </mat-form-field>  

@Kirubel и @Irad Amri спасибо!

В конечном итоге это работает для меня таким образом:

HTML-

 <mat-form-field class="form-field">
    <mat-label>Enter a date range</mat-label>
    <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
        <input **(dateInput)="addEvent('input', $event)" 
(dateChange)="addEvent('change', $event)"** matStartDate
            formControlName="start" placeholder="Start date">
        <input **(dateInput)="addNewDate('input', $event)" 
 (dateChange)="addNewDate('change', $event)"** matEndDate
            formControlName="end" placeholder="End date">
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>

    <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid 
 start date
    </mat-error>
    <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end 
 date

    </mat-error>
</mat-form-field>
  

TS-

 @Output() newItemEvent = new EventEmitter<bookedDate>();

  addNewDate(type: string, event: MatDatepickerInputEvent<Date>) {
    this.dateRange.dateStart = this.range.get('start').value;
    this.dateRange.dateEnd = this.range.get('end').value;
    this.newItemEvent.emit(this.dateRange);
  }
  

И еще раз, большое спасибо за помощь!

Я использовал (dateChange)="function()" для запуска изменения даты в mat date picker.

Хотя ответ Мэтта хороший, недостатком этого подхода является то, что (dateChange) срабатывает только при изменении ввода конечной даты. Например, если пользователь изменяет начальную дату, введя, его событие не сработает.

В итоге я использовал Subject ‘s для объединения наблюдаемых с обоих входных данных. Это позволяет мне прослушивать, когда каждый отдельный ввод был изменен. Либо с помощью средства выбора, либо путем ввода. Проверяя value , переносимое событием, мы можем определить, когда пользователь закончил выбирать обе действительные даты.

   <mat-form-field appearance="fill">
          <mat-label>Travel date</mat-label>
            <mat-date-range-input [rangePicker]="picker">
              <input matStartDate placeholder="Start date" (dateChange)="startDatePicker.next($event)">
              <input matEndDate placeholder="End date"  (dateChange)="endDatePicker.next($event)">
            </mat-date-range-input>
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-date-range-picker #picker></mat-date-range-picker>
        </mat-form-field>
  

TS:

   startDatePicker = new Subject<MatDatepickerInputEvent<any>>();
  endDatePicker = new Subject<MatDatepickerInputEvent<any>>();

  ngOnInit(): void {
    const dateChange$ = combineLatest([this.startDatePicker, this.endDatePicker]).pipe(
      map(([a$, b$]) => ({
        start: a$,
        end: b$
      }))
    );

    dateChange$.subscribe((data) => {
      if (data.start.value amp;amp; data.end.value) {
        console.log('User has picked both ranges!');
      }
    });
  }
  

Попробуйте dateChange вместо этого

 <mat-date-range-input [formGroup]="range" [rangePicker]="picker" (dateChange)="addNewDate()">
    <input matStartDate formControlName="start" placeholder="Start date">
    <input matEndDate formControlName="end" placeholder="End date">
</mat-date-range-input>