Material Datepicker sending the date with one day earlier than selected date

I have the following datepicker input:

<mat-form-field class="w-full">
<mat-label>{{ "DATE" | translate }}</mat-label>
<input matInput [matDatepicker]="datePicker" [formControlName]="'date'" />
<mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
<mat-datepicker #datePicker></mat-datepicker>
<mat-error>
{{ 'REQUIRED' | translate }}
</mat-error>
</mat-form-field>


I also have added this to my component:

const MY_DATE_FORMAT = {
parse: {
dateInput: 'DD/MM/YYYY',
},
display: {
dateInput: 'DD/MM/YYYY',
monthYearLabel: 'MMMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY'
}
};

@Component({
selector: 'app-document',
templateUrl: './document.component.html',
styleUrls: ['./document.component.scss'],
encapsulation: ViewEncapsulation.None,
providers: [
{ provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT },
],
})


When selecting the date from the input, it is displayed incorrectly (one day earlier than the selected date).

For example, when I selected 10/05/2024, using console.log before saving the data shows "2024-05-09T22:00:00.000Z". It has selected 09 instead of 10.

Any reason why this is happening?

Continue reading...