如何从Angular 2中为DatePicker设置timeZone

Question

嗨，伙计们，如果我的第一时间是用角材料，那么有什么办法可以从角材料2设置日期选择器上的时区。

组件

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

Answer 1

您的意思是语言环境吗？您必须使用Angular Material中的MAT_DATE_LOCALE标记进行设置。从文档：

默认情况下，MAT_DATE_LOCALE注入令牌将使用来自LOCALE_ID的现有@angular/core语言环境代码。如果要覆盖它，则可以为MAT_DATE_LOCALE令牌提供新值：

@NgModule({
    providers: [
        {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
    ],
})
export class MyApp {}

也可以在运行时使用setLocale的DateAdapter方法设置语言环境。

import { DateAdapter, NativeDateAdapter } from '@angular/material';

@Component({
    selector: 'foo',
    template: ''
})
export class FooComponent {
    constructor(dateAdapter: DateAdapter<NativeDateAdapter>) {
        dateAdapter.setLocale('de-DE');
    }
}

Answer 2

从技术上讲，我认为您问题的正确答案是创建自定义DateAdapter

这是通过继承DateAdapter并提供您的子类作为DateAdapter实现。

但是，如果根本问题是您正在使用MomentDateAdapter并实际单击2019年5月2日（当我将时区切换到伦敦时，就会看到该日期）中的奇数时间，例如2019-05-01 23:00:00，那么解决方案是将时刻日期适配器设置为使用UTC，例如：

{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }

然后您将看到，如您所愿，2019年5月2日将以2019-05-02 00:00:00的名义进行。