web-dev-qa-db-ja.com

Material Angular 6 DatePickerが1日前に日付を解析しています

マテリアルの現在のバージョンに本当に奇妙なことが起こっています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>

誰かがそれを修正する方法を知っていますか？

angulartypescriptdatepickerangular-material
11
ErickXavier

ですから、少し調べたところ、タイムゾーンの問題であることがわかりました。一時的に修正するには、T00：00：をyyyy/MM/ddの形式でバックエンドから送信された日付の最後に連結する必要がありました。

最善のオプションは、可能であれば、バックエンドで形式をyyyy/MM/ddTHH：mm：ssに変更することです。

それ以外の場合、フォーマットを使用する必要があるときに問題を解決するための2つのオプションがありますyyyy/MM/dd Angular 6 Material DatePicker：te bad and good。

  • 悪い（そして一時的な可能性がある）のは、私がしたことを行うことです。DatePickerが解析する前に、日付の終わりにT00：00：を連結します。
  • 良いのは、実際に日付文字列を取得して日付に変換し、タイムゾーンをGMTに変換してから、DatePickerで解析できるようにすることです。

私のように、私が必死で助けてくれることを願っています。

6
ErickXavier

日付を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で時間コンポーネントを選択する機会がないことを考えると、これは適切なようです。

Material DatePicker info から取得。

5
bsplosion

次のような解析関数を実行できます。

let newDate= new Date(oldDate);
newDate.setMinutes(newDate.getMinutes() + newDate.getTimezoneOffset());

return newDate;
2
João Portella