当前版本的Material Angular DatePicker发生了一些非常奇怪的事情,在我将它从A5更新到A6之后,它开始在前一天解析我的日期,示例在这里: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>
有谁知道如何解决这个问题?
答案 0 :(得分:5)
因此,经过一些研究后我发现这是一个时区问题。要临时修复它,我必须将 T00:00:00 连接到我的日期结束时,该日期来自后端,格式为 yyyy / MM / dd 。
最好的选择是,如果可能的话,后端将格式更改为 yyyy / MM / ddTHH:mm:ss 。
否则,当您必须在Angular 6 Material DatePicker中使用格式 yyyy / MM / dd 时,有两个选项可以解决问题:不好和好。
我希望我能像我一样帮助绝望的人。
答案 1 :(得分:5)
对于只希望将其日期设置为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
并导入模块/选项对象:
import {MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule} from '@angular/material-moment-adapter';
完成此操作后,任何DatePicker都将提供UTC日期,并且考虑到没有机会使用DatePicker选择时间分量,这似乎是合适的。
答案 2 :(得分:1)
您可以执行以下分析功能:
let newDate= new Date(oldDate);
newDate.setMinutes(newDate.getMinutes() + newDate.getTimezoneOffset());
return newDate;