更改日期选择器的语言，保持 Material Angular 10 的格式

Question

我的应用程序支持多语言，我想为 angular material 日期选择器实现翻译。我使用了 material 中的 dateAdapter class 并设置了值，但在这样做时我的显示格式正在发生变化。

有人遇到同样的问题吗？

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 is based off the functionality available in JavaScript's native Date object. Thus it is not suitable for many locales. One of the biggest shortcomings of the native Date object is the inability to set the parse format. We highly recommend using the MomentDateAdapter or a custom DateAdapter that works with the formatting/parsing library of your choice.

唯一对应的是，通过使用 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');
  }
}

更改日期选择器的语言，保持 Material Angular 10 的格式

Change language of Datepicker with maintaining format of Material Angular 10

javascript

angular

typescript

angular-material

angular-i18n