使用 Material Angular 10 的维护格式更改 Datepicker 的语言

Question

我的应用程序中确实有多语言支持，并希望实现角度材料日期选择器的翻译。我已经使用了材料中的 dateAdapter 类并设置了值，但是在这样做时，我的显示格式正在发生变化。

有没有人遇到过同样的问题？

export const MY_FORMATS = {
    parse: {
        dateInput: 'LL',
    },
    display: {
        dateInput: 'ddd, MMM. D YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};

@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['./test.scss'],
  providers: [{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }],
})
ngOnInit(): void {
    //on language change
    //change language 
    this.dateAdapter.setLocale('fr');
}

Answer 1

对于多语言支持，我建议您使用MomentDateAdapter。以下是 Angular 文档中关于多语言支持和 NativeDateAdapter（默认的）的注释：

MatNativeDateModule 基于 JavaScript 原生 Date 对象中可用的功能。因此它不适合许多区域设置。原生 Date 对象的最大缺点之一是无法设置解析格式。我们强烈建议使用 MomentDateAdapter 或与您选择的格式化/解析库配合使用的自定义 DateAdapter。

唯一的对应是，通过使用，MomentDateAdapter您现在将拥有moment依赖项......但没什么大不了的，而且您可能已经在使用它了。

这是一些示例代码（取自 Angular 文档）：

import {Component} from '@angular/core';
import {
  MAT_MOMENT_DATE_FORMATS,
  MomentDateAdapter,
  MAT_MOMENT_DATE_ADAPTER_OPTIONS,
} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

/** @title Datepicker with different locale */
@Component({
  selector: 'test',
  templateUrl: 'test.html',
  styleUrls: ['test.css'],
  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: 'fr'},

    // `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, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class DatepickerLocaleExample {
  constructor(private _adapter: DateAdapter<any>) {}

  // Change adapter language to japanese
  japanese() {
    this._adapter.setLocale('ja-JP');
  }
}