Angular 日期选择器将日期设置为实际日期输入前 1 天

Question

我有一个使用反应形式的角度形式，我有这个日期选择器：

<mat-form-field class="w-100">
          <mat-label>Prossima scadenza</mat-label>
          <input
            matInput
            [matDatepicker]="picker"
            [min]="minDate"
            formControlName="chosendate"
            (change)="datePickerChanged($event)"
          />
          <mat-datepicker-toggle
            matIconSuffix
            [for]="picker"
          ></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>

这是我的ts：

form = new FormGroup({
    ...
    nextdeadline: new FormControl<Date | null>(null),
    ...
  });

datePickerChanged(event: any) {
    console.log(event.target.value)
  }

控制台日志输出正确的插入日期，但当我提交表单时，发送的值是所选日期之前 1 天。这是为什么？我已经在 app.module.ts 中设置了 MAT_DATE_LOCALE

Answer 1

这可以解释为当地时区位于本初子午线以东，并且表单提交会自动转换为 GMT/UTC 时间（伦敦时间），但您期望的时间是本地时间，并且早于伦敦时间（东部）。

更多背景信息，日期相差 1 天是许多语言和平台上的一个常见问题，特别是对于客户端开发。根本原因通常是由时区引起的。每个浏览器可能位于不同的时区，因此在没有明确时区的情况下存储日期/时间信息会导致数据不明确。多时区应用程序的最佳实践是将时间存储为 UTC/GMT（伦敦时间），然后可以在全球范围内轻松排序和比较。 （请注意，夏令时使问题变得更加复杂，因为与 GMT 的时差可能会因日期甚至当地地区而异。）