Angular material date picker sending date 1 day before and how to use moment with Angular material datepicker

Question

I am using angular material date picker but when I am sending date to my backend. It is sending date which is 1 day before. So if I select 6th February then while sending to the backend it selects 5th Feb. My date value shown in json console as "treatmentDate":"2021-02-05T18:30:00.000Z"

code for Datepicker

<mat-form-field appearance="outline">
                    <mat-label>Choose Treatment Date</mat-label>
                    <input matInput [matDatepicker]="dp3" formControlName="treatmentDate" required>
                    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
                    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
                </mat-form-field>

Post Model

 let postPatientInformation: PostTreatmentInformationModel = {
      id: treatmentInformationFormData.id,
      title : treatmentInformationFormData.treatmentTitle,
      summary: treatmentInformationFormData.treatmentSummary,
      patientId: this.treatmentInformation.patientId,
      treatmentDate: this.formatDate(treatmentInformationFormData.treatmentDate),
      treatmentFiles: this.treatmentFiles == null ? null : this.treatmentFiles
    };
    console.log("In post treatment", JSON.stringify(postPatientInformation));

Issue solved by formatting the date to remove offset

 var offsetMs = treatmentDate.getTimezoneOffset() * 60000;
return new Date(treatmentDate.getTime() - offsetMs);

How to fix this issue? Also, after researching I found out that this issue is related to formatting and many suggest to use moment with angular material datepicker. But I do not know how to use it.

I have not written it as I was trying somethings with moment if anything works but at the moment just returning the same value. Even without formatDate function it is the same — Ajinkya Gadgil

SJNF SJNF · Accepted Answer · 2021-02-04T20:42:45

I think I have solution for you. I am using ReavitveForm to solve your problem. Here is my code given below => HTML:

<form [formGroup]="form">

<mat-form-field appearance="outline">
                    <mat-label>Choose Treatment Date</mat-label>
                    <input matInput [matDatepicker]="dp3" formControlName="treatmentDate" required>
                    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
                    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
 </mat-form-field>

</form>

<br><span>Selected Treatment date:</span> {{selectedTreatmentDate}}

TS:

export class DatepickerOverviewExample {
  constructor(
    private fb: FormBuilder) {
      this.form = fb.group({
        treatmentDate:this.treatmentDate
      });
     
       this.treatmentDate.valueChanges.subscribe((v) => {
        this.selectedTreatmentDate = v;
      })
    }
  form: FormGroup;
  treatmentDate= new FormControl(new Date());
  selectedTreatmentDate: Date;
}

NOTE: I have created a stackblitz demo for you. Please Check the link of Stackblitz Demo Code

Angular material date picker sending date 1 day before and how to use moment with Angular material datepicker

1 Answers