Angular Material2を使用した際のTimeZone設定について

Question

現在、Angular6.0.2、Angular Materialを用いてシステムを作成しています。

その中で、Angular MaterialのDatePickerについてハマってしまったのでお知恵を拝借できればと思い投稿しました。

使用しているDatePicker
https://material.angular.io/components/datepicker/overview

<form novalidate #frm="ngForm" [formGroup]="testForm" (ngSubmit)="onSubmit(frm.value)">
  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="日付" formControlName="targetDate">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</form>

上記のようにDatePickerを定義していますが、Submitした際、frm.valueに含まれる「targetDate」の値が9時間前の値になってしまいます。

例）DatePickerで「2018/05/20」を選択すると、targetDateの値は「2018/05/19 15:00」となります。

恐らくタイムゾーンの設定が「ja」になっていないことが原因かと思われますが、どこで設定したらいいのかわからない状態です。

ModuleのProvider定義で下記のように設定してみましたが、カレンダーは日本表記になりますが、値は9時間前のままでした。

{
  provide: MAT_DATE_LOCALE,
  useValue: 'ja',
},

解決方法などわかる方がいらっしゃいましたらご教示頂ければと思います。

Answer 1

Angular7で確認なのでバージョンが違いますが参考までに

0時になりますね。

• app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';

import { MatNativeDateModule, MatInputModule } from '@angular/material';
import {  MAT_DATE_LOCALE } from '@angular/material/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule,
    AppRoutingModule,
    MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule
  ],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'ja' },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• app.component.html

<form novalidate #frm="ngForm"  (ngSubmit)="onSubmit()" [formGroup]="testForm">
<mat-form-field >
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" (dateChange)="EndDateChange($event.value)" formControlName="targetDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button>submit</button>
</form>

• app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'datepicker';
  testForm = new FormGroup({
    targetDate : new FormControl('')
  });

  onSubmit() {
    console.log('stop');  // ←　ここでデバックで止めて確認
  }
}