通过维护Material Angular 10的格式来更改Datepicker的语言

问题描述

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

解决方法

对于多语言支持，建议您使用 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');
  }
}