Material Angular DatePicker的当前版本发生了一些非常奇怪的事情，在我将其从A5更新到A6之后，它开始解析我的日期1天前，示例如下：https://stackblitz.com/edit/angular6-datepicker-parsing-wrong-date
我使用的是原始文档示例，只是在语言上稍微修改了一下，并将自定义日期值应用于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>有人知道怎么修吗？
4条答案
按热度按时间eivnm1vs1#
所以，经过一点研究，我发现这是一个时区的问题。为了临时解决这个问题，我必须将 T00：00：00 连接到我的日期的末尾，该日期来自后端，格式为 yyyy/MM/dd。
如果可能的话，最好的选择是在后端将格式更改为 yyyy/MM/ddTHH：mm：ss。
否则，当你必须在Angular 6 Material DatePicker中使用 yyyy/MM/dd 格式时，有两个选项可以解决这个问题：坏的和好的。
我希望我能帮助像我一样的绝望的人。
w8ntj3qf2#
对于那些只希望日期是UTC日期并且通过DatePicker使用JS Date对象的人，您可以向
@NgModule提供程序添加适配器选项：您需要将
@angular/material-moment-adapter添加到package.json并导入模块/选项对象：一旦这样做，任何DatePicker将提供UTC日期，考虑到没有机会使用DatePicker选择时间组件，这似乎是合适的。
从材质DatePicker信息中提取。
pb3s4cty3#
你可以做一个parse函数，像这样：
hgc7kmma4#