更改 Material Angular 日期选择器的语言 4

Question

如何更改 Material Angular 的日期选择器的语言？我在 Angular material 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

抱歉，这应该是一条评论，但我没有达到要求的最低声誉。

这是一篇关于 DatePicker 的好博客 post，包括将其与 moment.js 一起使用，如上述评论中提到的@Gregor Doroschenko。

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

Answer 2

md-datepicker 提供了setLocale方法可以用来设置任何语言(list of locale)。

下面是将语言环境设置为 'fr' 的示例：

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

需要记住的一件事是，md-datepicker 的默认日期解析格式是 mm/dd/yyyy，因此如果语言环境具有不同的日期格式（对于 'fr' 其 dd/mm/yyyy），我们需要定义一个扩展 NativeDateAdapter 的 class 来解析新的日期格式。如果没有设置正确的日期格式，就会出现这样的问题.

import { NativeDateAdapter, DateAdapter, MD_DATE_FORMATS } from "@angular/material/core";
    
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 demo

Answer 3

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

&

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

在 tpv.modules.ts

中执行此操作

Answer 4

可通过 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 5

对于在编辑输入字段时遇到错误的任何人（例如：输入 DD/MM/YYYY 会将其更改为 MM/DD/YYYY 或根本不起作用）创建一个适配器：

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

export class FrenchDateProvider extends NativeDateAdapter {

   parse(value: string) {
      let it = value.split('/');
      if (it.length == 3) {
         return new Date(+it[2], +it[1] - 1, +it[0], 12);
      }
   }

   format(date: Date, displayFormat: Object) {
      return ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
   }

}

将其作为提供者添加到您的模块中：

@NgModule({
   providers: [
      { provide: DateAdapter, useClass: FrenchDateProvider }
   ]
})
export class SharedModule { }

Answer 6

对我来说，可行的解决方案与 vladernn 的类似，但它应该是：

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

和

providers: [{ provide: MAT_DATE_LOCALE, useValue: 'pl' }]

在 material.module.ts 文件中。

区别：新的导入地址和更短的 useValue 代码。

更改 Material Angular 日期选择器的语言 4

Change language of Datepicker of Material Angular 4

javascript

date

typescript

angular-material2

angular