Question

我正在尝试为angular2-material-datepicker设置区域设置。我已经阅读了很多帖子，提到$mdDateLocaleProvider。但我不知道如何使用打字稿来合并它。我们正在使用Angular2开发我们的项目。

Answer 1

编辑app.module.ts不会在运行时提供区域设置更改。经过一些调试后，ticket我发现这个有用了

export class AppComponent {

constructor(private dateAdapter: DateAdapter<Date>) {
   dateAdapter.setLocale('de');
}

您当然可以在用于本地化的任何其他组件中执行此操作。

Answer 2

尝试添加

{ provide: LOCALE_ID, useValue: "en-GB" }

在app.module中提供给您的提供商。

Answer 3

有点晚了，但是如果有人仍然需要，下面的帖子显示了如何设置它：

https://medium.com/@kristinahertmann/multi-language-date-formats-with-angular-material-b8598415d117

简历中的

是这样：

constructor(private translate: TranslateService, private dateAdapter: DateAdapter<Date>) {}

useLanguage(language: Languages): void{
   this.translate.use(language);
   this.dateAdapter.setLocale(language);
}

Answer 4

将以下行添加到app.module.ts提供程序：

{provide: MAT_DATE_LOCALE, useValue: 'de-DE'}

Answer 5

您应该在项目中同时安装@angular/material-moment-adapter和moment！在项目目录中执行以下命令：

npm install @angular/material-moment-adapter
npm install moment

如果您想为您的应用全局设置区域设置，则需要更新app.module.ts，如下所示：

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';

/** @title Datepicker with different locale */
@NgModule({
  declarations: [],
  imports: [],
  entryComponents: [],
  providers: [
    // The locale would typically be provided on the root module of your application. We do it at
    // the component level here, due to limitations of our example generation script.
    {provide: MAT_DATE_LOCALE, useValue: 'ja-JP'},

    // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
    // `MatMomentDateModule` in your applications root module. We provide it at the component level
    // here, due to limitations of our example generation script.
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class AppModule {
  constructor(private adapter: DateAdapter<any>) {}

  setDateAdapterLocale(localeString: string): void {
    this.dateAdapter.setLocale(localeString);
  }
}

参考：
1. Datepicker | Angular Material
2. Moment | Github
3. @angular/material-moment-adapter | npm

在angular2-material-datepicker中设置区域设置

5 个答案: