Material Angular 6 DatePicker在前一天解析我的日期

Question

当前版本的Material Angular DatePicker发生了一些非常奇怪的事情,在我将它从A5更新到A6之后,它开始在前一天解析我的日期,示例在这里:https://stackblitz.com/edit/angular6-日期选择器的解析,错误的日期

我正在使用原始文档示例,对我自己的语言稍有改变语言,并将自定义日期值应用于ngModel,以便它可以解析.

但你可以在这里查看代码:

import {Component} from '@angular/core';
import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

@Component({
  selector: 'datepicker-locale-example',
  templateUrl: 'datepicker-locale-example.html',
  styleUrls: ['datepicker-locale-example.css'],
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'pt'}, //my change from the original documentation example
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class DatepickerLocaleExample {
  constructor(private adapter: DateAdapter<any>) {}

  private someDate = '2018-01-31'; //my change from the original documentation example

  french() {
    this.adapter.setLocale('fr');
  }
}

HTML:

<mat-form-field>
  <input matInput [matDatepicker]="myDatePicker" placeholder="Different locale" [(ngModel)]="someDate"> <!-- my change from the original documentation example -->
  <mat-datepicker-toggle matSuffix [for]="myDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatePicker></mat-datepicker>
  <mat-hint>Actual Date: {{someDate}}</mat-hint>
</mat-form-field>

<button mat-button (click)="french()">Dynamically switch to French</button>

有谁知道如何解决这个问题？

Answer 1

因此，经过一些研究，我发现这是一个时区问题。要临时修复它，我必须将T00：00：00连接到来自后端的日期末尾，格式为yyyy / MM / dd。

最好的选择是，如果可能的话，在后端将格式更改为yyyy / MM / ddTHH：mm：ss。

否则，当您必须在Angular 6 Material DatePicker中使用格式yyyy / MM / dd时，有2个选项可以解决该问题：不好是好。

• 不好的（可能只是临时的）是做我所做的事情，将T00：00：00连接到DatePicker解析它之前的日期末尾。
• 好的方法是实际获取日期字符串，将其转换为日期，将时区转换为GMT，然后允许DatePicker对其进行解析。

我希望我能像我一样帮助所有的绝望者。

Answer 2

对于只希望其日期为UTC日期并通过DatePicker使用JS Date对象卡住的任何人，您只需向@NgModule提供程序添加适配器选项即可：

@NgModule({
  imports: [MatDatepickerModule, MatMomentDateModule],
  providers: [
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
  ]
})

您需要添加@angular/material-moment-adapter到package.json并导入module / options对象：

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

完成此操作后，任何DatePicker都将提供UTC日期，并且考虑到没有机会使用DatePicker选择时间组件，这似乎是适当的。

从Material DatePicker信息中拉出。

Answer 3

您可以执行解析函数，如下所示：

let newDate= new Date(oldDate);
newDate.setMinutes(newDate.getMinutes() + newDate.getTimezoneOffset());

return newDate;