javascript - Change language of Datepicker with maintaining format of Material Angular 10 - Stack Overflow

admin管理员组

文章数量:1405411

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');
}

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');
}

• javascript
• angular
• typescript
• angular-material
• angular-i18n

Share Improve this question Follow edited Nov 13, 2020 at 20:55 app asked Nov 11, 2020 at 20:41 appapp 2071111 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6 +25

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

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 shortings of the native Date object is the inability to set the parse format. We highly remend using the MomentDateAdapter or a custom DateAdapter that works with the formatting/parsing library of your choice.

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.

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 ponent 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 ponent 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');
  }
}

本文标签： javascriptChange language of Datepicker with maintaining format of Material Angular 10Stack Overflow