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

Question

我的应用程序中确实有多语言支持，我想为有角度的材料日期选择器实现翻译。我使用了material中的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');
}
}