web-dev-qa-db-fra.com

Changer la langue de Datepicker of Material Angular 4

Comment changer la langue de Datepicker of Material Angular? Je ne trouve pas dans la documentation de Angular material 2. Here is a plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview

    <md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
javascriptangulardatetypescriptangular-material2
16
Melchia

Désolé, cela devrait être un commentaire, mais je n'ai pas la réputation minimale requise.

Voici un bon article de blog sur DatePicker, y compris l'utiliser avec moment.js comme @Gregor Doroschenko mentionné dans le commentaire ci-dessus.

https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b

10
Sisky
import {MAT_DATE_LOCALE} from '@angular/material';


providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }]

Pour ce faire, dans tpv.modules.ts

21
vladernn

md-datepicker fournit la méthode setLocale qui peut être utilisée pour définir n'importe quelle langue ( liste des paramètres régionaux ).

Voici un exemple de définition des paramètres régionaux sur "fr":

export class DatepickerOverviewExample {

  constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('fr');   
  }

}

Une chose à garder à l'esprit, le format d'analyse de date par défaut de md-datepicker est mm/dd/yyyy, donc si une locale a un format de date différent (pour 'fr' son dd/mm/yyyy), nous devrons définir une classe qui étend NativeDateAdapter pour analyser le nouveau format de date. Sans définir le format de date approprié, il y aura un problème comme celui-ci question .

import { NativeDateAdapter, DateAdapter, MD_DATE_FORMATS } from "@angular/material";

export class FrenchDateAdapter extends NativeDateAdapter {
  parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) {
        return null;
      }
      return new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }
}

@Component({
  ...
  providers: [{provide: DateAdapter, useClass: FrenchDateAdapter}],
})

Démo Plunker

7
Nehal

Le paramètre de paramètres régionaux peut être fourni via la constante MAT_DATE_LOCALE, mais pour changer la langue de manière dynamique, vous devez utiliser DateAdapter comme indiqué dans https://material.angular.io/components/datepicker/overview#internationalization

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  constructor(private dateAdapter: DateAdapter<any>) {}

  setFrench() {
    // Set language of Datepicker
    this.dateAdapter.setLocale('fr');
  }

}

Voici un autre exemple lorsque vous devez configurer les paramètres régionaux à partir d'un script externe:

<script>
  window.appConfig = {
    language: 'fr',
    // Other config options
    // ...
  };
<script>
<app-root></app-root>

Dans ce cas, vous devez également utiliser DateAdapter:

import {Injectable} from '@angular/core';
import {DateAdapter} from '@angular/material';

declare let window: any;

@Injectable()
export class AppConfigService {

  appConfig = window.appConfig;

  constructor(private dateAdapter: DateAdapter<any>) {
    // Set language of Datepicker
    this.dateAdapter.setLocale(this.appConfig.language);
  }

}
3
user147677