使用 Material Angular 10 的维护格式更改 Datepicker 的语言 [英] Change language of Datepicker with maintaining format of Material Angular 10

问题描述

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

I do have Multilanguage support in my application and would like to implement translation for the angular material date picker. I have used dateAdapter class from material and set the values but while doing so my format of display is getting changes.

有人遇到过同样的问题吗?

Is anyone have faced same issue?

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(默认的)的一个注释:

For multilanguage support I would recommend you to use the MomentDateAdapter. Here is one note from Angular docs about multi-language support and the NativeDateAdapter (the default one's):

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

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 作为依赖项...但没什么大不了的，您可能已经在使用它了.

The only counterpart is that by using MomentDateAdapter you will now have moment as a dependency... but not big deal, and you may already be using it.

这是一些示例代码(取自 Angular 文档):

Here is some example code (taken from Angular docs):

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 的维护格式更改 Datepicker 的语言的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！