Make sure the input you provide is a string. Convert the date to a string within your component.
@Component({
selector: "sample",
templateUrl: "./app.component.html",
providers: [DatePipe]
})
export class AppComponent implements OnInit {
dtStart: string = "";
dtEnd: string = "";
constructor(private datePipe: DatePipe) {}
ngOnInit(): void {
let currentDay: Date = new Date();
let oneWeekAgo = new Date();
oneWeekAgo.setDate(currentDay.getDate()-7)
this.dtStart = this.datePipe.transform(currentDay, "yyyy-MM-dd");
this.dtEnd = this.datePipe.transform(oneWeekAgo, "yyyy-MM-dd");
}
}
Alternatively, you can also utilize the datePipe directly in the template and format the date differently. Various formats are available at this link.
If you wish for the inputs to automatically update when either one changes, you can add this functionality to the component:
updateStartDate() {
let newDate = new Date(this.dtStart);
newDate.setDate(newDate.getDate()-7)
this.dtEnd = this.datePipe.transform(newDate, "yyyy-MM-dd");
}
updateEndDate() {
let newDate = new Date(this.dtStart);
newDate.setDate(newDate.getDate()+7)
this.dtStart = this.datePipe.transform(newDate, "yyyy-MM-dd");
}
Use the following code for the inputs:
<input (change)="updateStartDate()" type="date" class="form-control form-date" [(ngModel)]="dtStart">
<input (change)="updateEndDate()" type="date" class="form-control form-date" [(ngModel)]="dtEnd">
This is one approach - consider the implications of two-way binding in your specific scenario :)