时间戳

首页 > 解决方案 > Material Angular 6 DatePicker 正在解析我的日期前 1 天

angular - Material Angular 6 DatePicker 正在解析我的日期前 1 天

问题描述

当前版本的 Material Angular DatePicker 发生了一些非常奇怪的事情，在我将它从 A5 更新到 A6 之后，它开始在 1 天前解析我的日期，示例如下： 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>

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

标签： angulartypescriptdatepickerangular-material

解决方案

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

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

否则，当您必须在 Angular 6 Material DatePicker 中使用格式yyyy/MM/dd时，有 2 个选项可以解决问题：te bad and the good。

  • 不好的（可能只是暂时的）是做我所做的，在 DatePicker 解析它之前将T00:00:00连接到日期的末尾。
  • 好处是实际获取日期字符串，将其转换为日期，将时区转换为 GMT，然后允许 DatePicker 解析它。

我希望我能像我一样帮助那些绝望的人。

推荐阅读