角度材料日期选择器中的日期不正确 [英] day incorrect in angular material datepicker
问题描述
当我选择一个日期时,我会在字段中看到正确的日期,但是当我保存时,日期选择器会在我选择的日期前一天发送(偏移 3 小时)我正在使用角度反应形式和 MatMomentDateModule 作为日期选择器.
问题与时区有关,但我只想保存用户输入数据库的相同日期.
代码在这里repreduced:
github 上与此相关的问题:
https://github.com/angular/material2/issues/7167
感谢任何帮助,我认为很多开发人员都需要一个解决方案.
两天前,在 https://github.com/angular/material2/issues/7167,Silthus 发布了覆盖 MomentJsDataAdapter 的解决方法.我尝试了它,它在全球任何地方都具有魅力.
首先他添加了一个扩展 MomentDateAdapter 的 MomentUtcDateAdapter
import { Inject, Injectable, Optional } from '@angular/core';从@angular/material"导入{MAT_DATE_LOCALE};从'@angular/material-moment-adapter'导入{ MomentDateAdapter};从'时刻'导入{时刻};从时刻"导入 * 作为时刻;@Injectable()导出类 MomentUtcDateAdapter 扩展 MomentDateAdapter {构造函数(@Optional()@Inject(MAT_DATE_LOCALE)dateLocale:字符串){超级(日期语言环境);}createDate(year: number, month: number, date: number): 时刻{//如果任何组件越界,Moment.js 将创建一个无效日期,但我们//显式检查每种情况,以便我们可以抛出更多描述性错误.如果(月 <0 || 月 > 11){throw Error(`无效月份索引${month}".月份索引必须在 0 到 11 之间.`);}如果(日期<1){throw Error(`无效日期${date}".日期必须大于0.`);}let result = moment.utc({ year, month, date }).locale(this.locale);//如果结果无效,则该日期必须超出本月的范围.如果(!result.isValid()){throw Error(`Invalid date "${date}" for month with index "${month}".`);}返回结果;}}
然后在 AppModule 组件中,你必须这样做:
提供者:[...{提供:MAT_DATE_LOCALE,useValue:'en-GB'},{ 提供:MAT_DATE_FORMATS,使用值:MAT_MOMENT_DATE_FORMATS },{ 提供:DateAdapter,useClass:MomentUtcDateAdapter },...],
When I select a date I see the correct date in the field but, when I save, the datepicker send the day before the date I have selected ( 3 hours offset ) i am using angular reactive form and MatMomentDateModule for date picker .
the problem is related to timezones but i just want to save the same date that the user enter to database .
Code repreduced here : https://stackblitz.com/edit/angular-material-moment-adapter-example-kdk9nk?file=app%2Fapp.module.ts
issue related to this on githup :
https://github.com/angular/material2/issues/7167
Any help is appreciated , and i think a lot of developers need a solution for this .
Two days ago, at https://github.com/angular/material2/issues/7167, Silthus posted his workaround that overrides the MomentJsDataAdapter. I tried it and it worked as a charm from anywhere in the globe.
First he added a MomentUtcDateAdapter that extends MomentDateAdapter
import { Inject, Injectable, Optional } from '@angular/core';
import { MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { Moment } from 'moment';
import * as moment from 'moment';
@Injectable()
export class MomentUtcDateAdapter extends MomentDateAdapter {
constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
super(dateLocale);
}
createDate(year: number, month: number, date: number): Moment {
// Moment.js will create an invalid date if any of the components are out of bounds, but we
// explicitly check each case so we can throw more descriptive errors.
if (month < 0 || month > 11) {
throw Error(`Invalid month index "${month}". Month index has to be between 0 and 11.`);
}
if (date < 1) {
throw Error(`Invalid date "${date}". Date has to be greater than 0.`);
}
let result = moment.utc({ year, month, date }).locale(this.locale);
// If the result isn't valid, the date must have been out of bounds for this month.
if (!result.isValid()) {
throw Error(`Invalid date "${date}" for month with index "${month}".`);
}
return result;
}
}
And then in the AppModule component, you have to do this:
providers: [
...
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
{ provide: DateAdapter, useClass: MomentUtcDateAdapter },
...
],
这篇关于角度材料日期选择器中的日期不正确的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!