Issue with dates in object

i have object in angular component which is created like this:

calendarValues = { startDate: new Date(), endDate: new Date() };


on ngOnInit i am fetching data from backend and assigning values to this object:

this.calendarValues.startDate = new Date(this.leaveRecordForEdit.leaveStart);
this.calendarValues.endDate = new Date(this.leaveRecordForEdit.leaveEnd);


and that object calendarValues is forwarded to child component which displays 2 date dropdowns with [calendarValues]="calendarValues" and in child component i am using @Input() calendarValues: any; and again on ngOnInit i am assigning those dates to variables to be binded to html:

this.startDate = this.calendarValues.startDate;
this.endDate = this.calendarValues.endDate;


When testing i have following issue:

Second dropdown (10/3/2024) is showing correct value -value from db. Ouptut to json for startDate, endDate and calendarValues is just showing current date

Interestingly console log for calendarValues is giving:

Console output in constructor is null for calendarValues, but on ngInit is a bit wierd, on the first line of object in console i have for startDate value Oct 25 2024 but in expanded object startDate is has value of Oct 3, which is correct value from db and it is binded correctly to second dropDown, Same issue with values is happening for endDate in console with one difference 10/25/2024 is shown in html ?

So any thoughts on this? Can anyone explain in detial what is happening here?

Continue reading...