更改Material Angular 4的Datepicker语言

Question

如何更改Material Angular的Datepicker语言？我在Angular材料2的文档中找不到.这是一个plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview

    <md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

Answer 1

import {MAT_DATE_LOCALE} from '@angular/material';

&

providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }]

在tpv.modules.ts中执行此操作

Answer 2

对不起,这应该是一个评论,但我没有要求的最低声誉.

这是一篇关于DatePicker的好博文,包括将它与moment.js一起使用,如上面评论中提到的@Gregor Doroschenko.

https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

Answer 3

区域设置可以通过 MAT_DATE_LOCALE 常量提供，但要动态更改语言，您需要使用 DateAdapter，如https://material.angular.io/components/datepicker/overview#internationalization 中所示

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  constructor(private dateAdapter: DateAdapter<any>) {}

  setFrench() {
    // Set language of Datepicker
    this.dateAdapter.setLocale('fr');
  }

}

这是需要从外部脚本配置语言环境时的另一个示例：

<script>
  window.appConfig = {
    language: 'fr',
    // Other config options
    // ...
  };
<script>
<app-root></app-root>

在这种情况下，您还应该使用 DateAdapter：

import {Injectable} from '@angular/core';
import {DateAdapter} from '@angular/material';

declare let window: any;

@Injectable()
export class AppConfigService {

  appConfig = window.appConfig;

  constructor(private dateAdapter: DateAdapter<any>) {
    // Set language of Datepicker
    this.dateAdapter.setLocale(this.appConfig.language);
  }

}

Answer 4

md-datepicker提供了setLocale可用于设置任何语言(语言环境列表)的方法.

以下是将区域设置设置为"fr"的示例:

export class DatepickerOverviewExample {

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

}

需要注意的一点是,md-datepicker的默认日期解析格式是mm/dd/yyyy,所以如果一个语言环境具有不同的日期格式(对于'fr'它dd/mm/yyyy),我们需要定义一个扩展NativeDateAdapter为解析新日期格式的类.如果没有设置正确的日期格式,就会出现类似这个问题的问题.

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

export class FrenchDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) {
        return null;
      }
      return new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
}

@Component({
  ...
  providers: [{provide: DateAdapter, useClass: FrenchDateAdapter}],
})

Plunker演示