Material Angular 6 DatePicker 在 1 天前解析我的日期 [英] Material Angular 6 DatePicker is parsing my date 1 day before
问题描述
Material Angular DatePicker 的当前版本发生了一些非常奇怪的事情,在我将它从 A5 更新到 A6 后,它在 1 天前开始解析我的日期,示例如下:https://stackblitz.com/edit/angular6-datepicker-parsing-wrong-date
我正在使用原始文档示例,将语言稍微更改为我自己的语言,并将自定义日期值应用于 ngModel 以便它可以解析.
但是你可以在这里查看代码:
import {Component} from '@angular/core';从@angular/material-moment-adapter"导入 {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter};从@angular/material/core"导入 {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE};@成分({选择器:'datepicker-locale-example',templateUrl: 'datepicker-locale-example.html',styleUrls: ['datepicker-locale-example.css'],供应商: [{provide: MAT_DATE_LOCALE, useValue: 'pt'},//我对原始文档示例的更改{提供:DateAdapter,useClass:MomentDateAdapter,deps:[MAT_DATE_LOCALE]},{提供:MAT_DATE_FORMATS,使用值:MAT_MOMENT_DATE_FORMATS},],})导出类 DatepickerLocaleExample {构造函数(私有适配器:DateAdapter){}私人 someDate = '2018-01-31';//我对原始文档示例的更改法语() {this.adapter.setLocale('fr');}}
HTML:
<input matInput [matDatepicker]="myDatePicker" placeholder="不同地区" [(ngModel)]="someDate"><!-- 我对原始文档示例的更改--><mat-datepicker-toggle matSuffix [for]="myDatePicker"></mat-datepicker-toggle><mat-datepicker #myDatePicker></mat-datepicker><mat-hint>实际日期:{{someDate}}</mat-hint></mat-form-field><button mat-button (click)="french()">动态切换到法语</button>
有人知道怎么解决吗?
所以,经过一些研究后,我发现这是一个时区问题.为了临时修复它,我必须以 yyyy/MM/dd 格式将 T00:00:00 连接到来自后端的日期的结尾.>
如果可能,最好的选择是让后端将格式更改为 yyyy/MM/ddTHH:mm:ss.
否则,当您必须在 Angular 6 Material DatePicker 中使用 yyyy/MM/dd 格式时,有 2 个选项可以解决该问题:有好有坏.
- 不好的(可能只是暂时的)是做我所做的,在 DatePicker 解析它之前将 T00:00:00 连接到日期的末尾.
- 好处是实际获取日期字符串,将其转换为日期,将时区转换为 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屋!