I have attempted to tackle this issue, but I am encountering the problem of receiving the same date value for both inputs.
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);
}
}
In the Parent Component.html file, I am looking to connect these two output functions to the child component.
<app-date [endDate]="endDate" (sendDate)="endDate = $event" [startDate]="startDate"
(emitDate)="startDate=$event"></app-date>
The Child Component.html displays:
<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)">