Angular 材料日期选择器在 1 天前发送日期以及如何使用 Angular 材料日期选择器的时刻

Question

我正在使用角度材料日期选择器，但是当我将日期发送到我的后端时。发送日期是前 1 天。因此，如果我选择 2 月 6 日，那么在发送到后端时它会选择 2 月 5 日。我在 json 控制台中显示的日期值是“treatmentDate”：“2021-02-05T18:30:00.000Z”

日期选择器代码

<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>

后模型

 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));

通过格式化日期以删除偏移量来解决问题

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

如何解决这个问题？此外，经过研究，我发现这个问题与格式有关，许多人建议使用带角度材料日期选择器的时刻。但是不知道怎么用。

Answer 1

我想我有适合你的解决方案。我正在使用ReavitveForm 来解决您的问题。这是我在下面给出的代码=> 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;
}

注意：我为您创建了一个 stackblitz 演示。请查看Stackblitz Demo Code的链接