Date decremented by 1 day whenever it is displayed in a modal Angular15

Question

The date field is decremented by one day whenever I open it in a modal. This is the typescript file associated with that html.

  dob!: DatePipe;
  rescueDate!: string;
  dateAdded!: string;

  openEditPetMenu(template: TemplateRef<any>, petId: number, name: string, dob: DatePipe, gender: string, rescueDate: string,
dateAdded: string) {
this.modalRef = this.modalService.show(template, this.config);
this.petId = petId;
this.name = name;
this.dob = dob;
this.gender = gender;
this.rescueDate = rescueDate;
this.dateAdded = dateAdded;

}

I have tried replacing the date variables with string, DatePipe & Date but all produce the same result. How can I resolve this and make it so that the date displayed on the table is the same as the date inside the modal whenever I press the edit button? Btw I am using

import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

Edit** @Sergey

Html - Forms

   <mat-form-field appearance="standard">
                <mat-label> Date of Birth </mat-label>
                <input matInput type="text" [matDatepicker]="db" [min]="minDate" [max]="maxDate" [value]="dob"
                    [(ngModel)]="dob">
                <mat-datepicker-toggle matSuffix [for]="db"></mat-datepicker-toggle>
                <mat-datepicker #db></mat-datepicker>
   </mat-form-field>

 <mat-form-field appearance="standard" >
                <mat-label>Rescue Date</mat-label>
                <input matInput type="text" [matDatepicker]="rd" [min]="minDate" [max]="maxDate"
                    [value]="rescueDate" [(ngModel)]="rescueDate">
                <mat-datepicker-toggle matSuffix [for]="rd"></mat-datepicker-toggle>
                <mat-datepicker #rd></mat-datepicker>
 </mat-form-field>

<mat-form-field appearance="standard">
                <mat-label> Date Added </mat-label>
                <input matInput type="text" [matDatepicker]="da" [min]="minDate" [max]="maxDate" [value]="dateAdded"
                    [(ngModel)]="dateAdded">
                <mat-datepicker-toggle matSuffix [for]="da"></mat-datepicker-toggle>
                <mat-datepicker #da></mat-datepicker>
 </mat-form-field>

Html - Table

 <ng-container matColumnDef="dob">
        <th mat-header-cell *matHeaderCellDef>
            <h6><b class="table-heading">Date of Birth</b></h6>
        </th>
        <td mat-cell *matCellDef="let row">
            {{ row.dob | date:'fullDate' }}</td>
    </ng-container>

    <ng-container matColumnDef="rescueDate">
        <th mat-header-cell *matHeaderCellDef>
            <h6><b class="table-heading">Rescue Date</b></h6>
        </th>
        <td mat-cell *matCellDef="let row">
            {{ row.rescueDate | date:'fullDate' }}
        </td>
    </ng-container>

    <ng-container matColumnDef="dateAdded">
        <th mat-header-cell *matHeaderCellDef>
            <h6><b class="table-heading">Date Added</b></h6>
        </th>
        <td mat-cell *matCellDef="let row">
            {{ row.dateAdded | date:'fullDate' }}
        </td>
    </ng-container>

Answer 1

I found the answer. The reason why my date fields were decremented by 1 day is not due to a frontend issue but rather a backend issue. In my backend spring boot project. My date attributes had LocalDate as data type. I changed it to Data type and this resolved the issue.

change this

@Column(name="dob")
private LocalDate dob;

@Column(name="rescue_date")
private LocalDate rescueDate;

@CreationTimestamp
@Column(name="date_added")
private LocalDate dateAdded;

to

@Column(name="dob")
private Date dob;

@Column(name="rescue_date")
private Date rescueDate;

@CreationTimestamp
@Column(name="date_added")
private Date dateAdded;

EDIT* I encountered this issue again and it turns out to be related to timezone issues such as daylight savings etc.

I resolve it using the following snippet

const timestamp = parseInt(rescueDate);
const timezoneOffsetMs = new Date().getTimezoneOffset() * 60 * 4800;
const date = new Date(timestamp + timezoneOffsetMs);
// Format the date as per your requirements
const formattedDate = formatDate(date, 'yyyy-MM-dd', 'en');

this.rescueDate = formattedDate;

The getTimezoneOffset() method returns the timezone offset in minutes between the local time and UTC time. I multiply by 60 in order to convert from seconds to milliseconds. the value of 4800 is just a number I came up with that suits my timezone.