Mat 日期选择器发送了错误的日期

Question

我有这个输入用于选择日期

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

我也已将其添加到我的组件中

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 },
      ],
})

从输入中选择日期时，它显示不正确（比选择早一天） p.s: 我选择了 10/05/2024 在保存数据之前使用 console.log 显示了这一点 “2024-05-09T22：00：00.000Z” 它选择了 09 而不是 10！

有什么原因会发生这种情况吗？

Answer 1

根据 Angular Material Datepicker 文档，

默认情况下，

MomentDateAdapter

在您的时区特定区域设置中创建日期。您可以通过将

useUtc: true

传递到

provideMomentDateAdapter

或提供

MAT_MOMENT_DATE_ADAPTER_OPTIONS

注入令牌来更改默认行为，将日期解析为 UTC。

选择的日期时间基于您当地的时区。您需要注入

MAT_MOMENT_DATE_ADAPTER_OPTIONS

令牌，以便它使用 UTC 时区。

import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter';

providers: [
  {
    provide: DateAdapter,
    useClass: MomentDateAdapter,
    deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
  },
  { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT },
  { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
]

演示@StackBlitz