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

如何解决这个问题？此外，经过研究，我发现这个问题与格式有关，许多人建议将 moment 与 angular material datepicker 一起使用。但是不知道怎么用。

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

的链接

角度材料日期选择器发送日期前 1 天以及如何使用角度材料日期选择器

1 个答案: