web-dev-qa-db-fra.com

Comment définir les paramètres régionaux dans DatePipe dans Angular 2?

Je souhaite afficher Date au format européen dd/mm/yyyy mais à l'aide de DatePipe shortDate le format s'affiche uniquement avec le style de date américain mm/dd/yyyy.
Je suppose que les paramètres régionaux par défaut sont en_US. Peut-être qu'il me manque la documentation mais comment puis-je modifier les paramètres régionaux par défaut dans une application Angular2? Ou peut-être y a-t-il un moyen de passer un format personnalisé à DatePipe?

javascriptangulardate-pipe
116
nsbm

À partir de Angular2 RC6, vous pouvez définir les paramètres régionaux par défaut dans votre module d'application, en ajoutant un fournisseur:

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "en-US" }, //replace "en-US" with your locale
    //otherProviders...
  ]
})

Les canaux devise/date/nombre doivent prendre en compte les paramètres régionaux. LOCALE_ID est un OpaqueToken , à importer de angular/core.

import { LOCALE_ID } from '@angular/core';

Pour un cas d'utilisation plus avancé, vous pouvez choisir de définir les paramètres régionaux d'un service. Les paramètres régionaux seront résolus (une fois) lorsque le composant utilisant le canal de données est créé:

{
  provide: LOCALE_ID,
  deps: [SettingsService],      //some service handling global settings
  useFactory: (settingsService) => settingsService.getLanguage()  //returns locale string
}

J'espère que ça marche pour toi.

239
corolla

La solution avec LOCALE_ID est idéale si vous souhaitez définir la langue de votre application une fois. Mais cela ne fonctionne pas si vous voulez changer de langue pendant l’exécution. Dans ce cas, vous pouvez implémenter un canal de date personnalisé.

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
  }

  transform(value: any, pattern: string = 'mediumDate'): any {
    const datePipe: DatePipe = new DatePipe(this.translateService.currentLang);
    return datePipe.transform(value, pattern);
  }

}

Maintenant, si vous changez la langue d'affichage de l'application à l'aide de TranslateService (voir ngx-translate )

this.translateService.use('en');

les formats de votre application devraient être automatiquement mis à jour.

Exemple d'utilisation:

<p>{{ 'note.created-at' | translate:{date: note.createdAt | localizedDate} }}</p>
<p>{{ 'note.updated-at' | translate:{date: note.updatedAt | localizedDate:'fullDate'} }}</p>

ou consultez mon simple projet "Notes" ici .

enter image description here

50
Milan Hlinák

Avec angular5, la réponse ci-dessus ne fonctionne plus!

Le code suivant:

app.module.ts 

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

Conduit à l'erreur suivante:

Erreur: Données de paramètres régionaux manquantes pour les paramètres régionaux "de-à".

Avec angular5, vous devez charger et enregistrer vous-même le fichier de paramètres régionaux utilisé.

app.module.ts 

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDeAt from '@angular/common/locales/de-at';

registerLocaleData(localeDeAt);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "de-at" }, //replace "de-at" with your locale
    //otherProviders...
  ]
})

Documentation

45
zgue

J'ai jeté un œil dans date_pipe.ts et il contient deux informations intéressantes. près du sommet se trouvent les deux lignes suivantes:

// TODO: move to a global configurable location along with other i18n components.
var defaultLocale: string = 'en-US';

Près du bas se trouve cette ligne:

return DateFormatter.format(value, defaultLocale, pattern);

Cela me suggère que le canal de date est actuellement codé en dur pour être "en-US".

S'il vous plaît, éclairez-moi si je me trompe.

12
Mark Farmiloe

Si vous utilisez TranslateService à partir de @ngx-translate/core, voici une version sans créer de nouveau canal qui fonctionne avec la commutation dynamique au moment de l'exécution (testé sur Angular 7). Utilisation du paramètre locale de DatePipe ( docs ):

Commencez par déclarer les paramètres régionaux que vous utilisez dans votre application, par exemple. dans app.component.ts: 

import localeIt from '@angular/common/locales/it';
import localeEnGb from '@angular/common/locales/en-GB';
.
.
.
ngOnInit() {
    registerLocaleData(localeIt, 'it-IT');
    registerLocaleData(localeEnGb, 'en-GB');
}

Ensuite, utilisez votre pipe dynamiquement:

myComponent.component.html

<span>{{ dueDate | date: 'shortDate' : '' : translateService.currentLang }}</span>

myComponent.component.ts

 constructor(public translateService: TranslateService) { ... }
6
knnhcn

Vous faites quelque chose comme ça:

{{ dateObj | date:'shortDate' }}

ou

{{ dateObj | date:'ddmmy' }}

Voir: https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

4
Langley

Sur app.module.ts, ajoutez les importations suivantes. Il y a une liste d'options LOCALE ici .

import es from '@angular/common/locales/es';
import { registerLocaleData } from '@angular/common';
registerLocaleData(es);

Puis ajoutez le fournisseur

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "es-ES" }, //your locale
  ]
})

Utilisez des tuyaux en HTML. Voici le angular documentation pour cela.

{{ dateObject | date: 'medium' }}
4
Alejandro del Río

Pour ceux qui ont des problèmes avec AOT, vous devez le faire un peu différemment avec useFactory:

export function getCulture() {
    return 'fr-CA';
}

@NgModule({
  providers: [
    { provide: LOCALE_ID, useFactory: getCulture },
    //otherProviders...
  ]
})
3
vidalsasoon

Je me débattais avec le même problème et je ne travaillais pas avec

{{dateObj | date:'ydM'}}

J'ai donc essayé une solution de contournement, pas la meilleure solution mais cela a fonctionné:

{{dateObj | date:'d'}}/{{dateObj | date:'M'}}/{{dateObj | date:'y'}}

Je peux toujours créer un tuyau personnalisé.

3
hydrangenius

Ok, je propose cette solution, très simple, en utilisant ngx-translate

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {

  constructor(private translateService: TranslateService) {
}

  transform(value: any): any {
    const date = new Date(value);

    const options = { weekday: 'long',
                  year: 'numeric',
                  month: 'long',
                  day: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit',
                  second: '2-digit'
                    };

    return date.toLocaleString(this.translateService.currentLang, options);
  }

}
0
LizanLycan

Copié le tuyau Google a changé les paramètres régionaux et cela fonctionne pour mon pays, il est possible qu'ils ne l'aient pas terminé pour tous les paramètres régionaux. Ci-dessous le code.

import {
    isDate,
    isNumber,
    isPresent,
    Date,
    DateWrapper,
    CONST,
    isBlank,
    FunctionWrapper
} from 'angular2/src/facade/lang';
import {DateFormatter} from 'angular2/src/facade/intl';
import {PipeTransform, WrappedValue, Pipe, Injectable} from 'angular2/core';
import {StringMapWrapper, ListWrapper} from 'angular2/src/facade/collection';


var defaultLocale: string = 'hr';

@CONST()
@Pipe({ name: 'mydate', pure: true })
@Injectable()
export class DatetimeTempPipe implements PipeTransform {
    /** @internal */
    static _ALIASES: { [key: string]: String } = {
        'medium': 'yMMMdjms',
        'short': 'yMdjm',
        'fullDate': 'yMMMMEEEEd',
        'longDate': 'yMMMMd',
        'mediumDate': 'yMMMd',
        'shortDate': 'yMd',
        'mediumTime': 'jms',
        'shortTime': 'jm'
    };


    transform(value: any, args: any[]): string {
        if (isBlank(value)) return null;

        if (!this.supports(value)) {
            console.log("DOES NOT SUPPORT THIS DUEYE ERROR");
        }

        var pattern: string = isPresent(args) && args.length > 0 ? args[0] : 'mediumDate';
        if (isNumber(value)) {
            value = DateWrapper.fromMillis(value);
        }
        if (StringMapWrapper.contains(DatetimeTempPipe._ALIASES, pattern)) {
            pattern = <string>StringMapWrapper.get(DatetimeTempPipe._ALIASES, pattern);
        }
        return DateFormatter.format(value, defaultLocale, pattern);
    }

    supports(obj: any): boolean { return isDate(obj) || isNumber(obj); }
}
0
Dživo Jelić