Вот что я пробовал, но получаю одинаковое значение даты для обоих входов.

export class DateComponent implements OnInit {
  @Input() startDate: string;
  @Input() endDate: string;
  @Output() sendDate: EventEmitter<any> = new EventEmitter();
  @Output() emitDate: EventEmitter<any> = new EventEmitter();

  startMinDate: Date;
  startMaxDate: Date;
  endMinDate: Date;
  endMaxDate: Date;


  constructor(private moment: MomentService) {
    this.startMaxDate = this.moment.getMaxDate().toDate();
    this.startMinDate = this.moment.getMinDate().toDate();
    this.endMaxDate = this.moment.getMaxDate().toDate();
    this.endMinDate = this.moment.getMinDate().toDate();
  }

  ngOnInit() {}

  onChange({ value }) {
    const ISOString = value.toISOString();
    this.sendDate.emit(ISOString);
  }

  changedDate({ value }) {
    const ISOString = value.toISOString();
    this.emitDate.emit(ISOString);
  }
}

Parent Component.html, мне нужно привязать эти две функции вывода к дочернему компоненту

<app-date [endDate]="endDate" (sendDate)="endDate = $event" [startDate]="startDate"
          (emitDate)="startDate=$event"></app-date>

ChildComponent.html

<input matInput [matDatepicker]="picker" [value]="endDate" [min]="endMinDate" [max]="endMaxDate"
            (dateChange)="changedDate($event)">
<input matInput [matDatepicker]="picker1" [value]="startDate" [min]="startMinDate" [max]="startMaxDate"
            (dateChange)="onChange($event)">
1
SAMUEL ABIODUN BABATUNDE 14 Апр 2020 в 22:43

1 ответ

Лучший ответ

Единственная проблема заключается в том, что два метода, срабатывающих при изменении дат, пересекаются. Если вы их измените, ваш код будет работать должным образом. Итак, теперь у вас есть:

<input matInput [matDatepicker]="picker" [value]="endDate" [min]="endMinDate" [max]="endMaxDate" 
(dateChange)="changedDate($event)">  <====== CHANGE THIS LINE

<input matInput [matDatepicker]="picker1" [value]="startDate" [min]="startMinDate" [max]="startMaxDate"
(dateChange)="onChange($event)">    <======== AND THIS LINE

Должно быть:

<input matInput [matDatepicker]="picker" [value]="endDate" [min]="endMinDate" [max]="endMaxDate" 
(dateChange)="onChange($event)">  <====== CORRECT!!!

<input matInput [matDatepicker]="picker1" [value]="startDate" [min]="startMinDate" [max]="startMaxDate"
(dateChange)="changedDate($event)">    <======== CORRECT!!!

Проверьте этот Stackblitz, который я сделал на основе вашего кода: https://stackblitz.com/edit/angular-eroujf < / а>

0
Kari F. 15 Апр 2020 в 01:49