日付を選択すると、フィールドに正しい日付が表示されますが、保存すると、日付ピッカーは選択した日付の前日(3 時間のオフセット)を送信します。日付ピッカーには、Angular Reactive Form と MatMomentDateModule を使用しています。
この問題はタイムゾーンに関連していますが、ユーザーがデータベースに入力したのと同じ日付を保存したいだけです。
ここに再現されたコード:https://stackblitz.com/edit/angular-material-moment-adapter-example-kdk9nk?file=app%2Fapp.module.ts
gitup 上のこれに関連する問題:
https://github.com/angular/material2/issues/7167
どのような助けでも大歓迎です。多くの開発者がこの解決策を必要としていると思います。
ベストアンサー1
2日前、https://github.com/angular/material2/issues/7167Silthus は、MomentJsDataAdapter をオーバーライドする回避策を投稿しました。私はそれを試してみましたが、世界中のどこからでもうまく機能しました。
まず、MomentDateAdapterを拡張するMomentUtcDateAdapterを追加しました。
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;
}
}
そして、AppModule コンポーネントでは、次の操作を行う必要があります。
providers: [
...
{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
{ provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
{ provide: DateAdapter, useClass: MomentUtcDateAdapter },
...
],