Material Angular 6 DatePicker正在解析我的日期1天前 [英] Material Angular 6 DatePicker is parsing my date 1 day before

问题描述

当前版本的Material Angular DatePicker确实发生了一些奇怪的事情，在我将其从A5更新为A6后，它开始解析前一天的日期，示例如下:

有人知道如何解决这个问题吗?

解决方案

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

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

否则，当您必须在Angular 6 Material DatePicker中使用格式 yyyy/MM/dd 时，有两种方法可以解决该问题:不好，就是好.

• 不好的(可能只是暂时的)是做我做的事情，将 T00:00:00 连接到DatePicker解析日期之前.
• 好处是实际获取日期字符串，将其转换为日期，将时区转换为GMT，然后允许DatePicker对其进行解析.

我希望我能像我一样帮助绝望的人.

There's something really weird happening to the current version of the Material Angular DatePicker, after I updated it from A5 to A6 it started to parse my date 1 day before, the example is here: https://stackblitz.com/edit/angular6-datepicker-parsing-wrong-date

I'm using the original documentation example with a slight change on the language to my own language, and applying a custom date value to the ngModel so it can parse.

But you can check the code here:

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

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

Does anyone knows how to fix that?

解决方案

So, after a little bit of research I've find out that it was a timezone issue. To temporary fix it, I had to concatenate T00:00:00 to the end of my date that was coming from backend under the format yyyy/MM/dd.

The best option is, if it's possible, to the backend to change the format to yyyy/MM/ddTHH:mm:ss.

Otherwise there's 2 options to solve the problem when you have to use the format yyyy/MM/dd in your Angular 6 Material DatePicker: te bad and the good.

• The bad (and possible just a temporary) is to do what I did, concatenate T00:00:00 to the end of the date before the DatePicker parses it.
• The good is to actually get the date string, convert it into date, convert the timezone to GMT and then allow the DatePicker to parse it.

I hope I can help the desperate all over, like me.

这篇关于Material Angular 6 DatePicker正在解析我的日期1天前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！