• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/07/2024

Formatez les dates

Dans votre application, vous affichez la date de création de chaque FaceSnap, mais le formatage affiché n'est vraiment pas top. Vous allez maintenant personnaliser ce formatage pour améliorer l'expérience de vos utilisateurs avec DatePipe.

Personnalisez le format des dates

Il est tout à fait possible d'utiliser DatePipe comme vous avez utilisé UpperCasePipe précédemment, et un formatage par défaut sera appliqué.

Dans le TypeScript :

import {
  //...
  DatePipe,
} from '@angular/common';

@Component({
  selector: 'app-face-snap',
  standalone: true,
  imports: [
    // ...
    DatePipe
  ],
  templateUrl: './face-snap.component.html',
  styleUrl: './face-snap.component.scss'
})
export class FaceSnapComponent implements OnInit {
  // ...
}

et dans le HTML :

<p>FaceSnap créée le {{ faceSnap.createdAt | date }}</p>
La date est formatée avec un format par défaut
Date formatée

C'est mieux, mais c'est pas encore ça.

Pour configurer un pipe, on ajoute deux-points  :  puis généralement une chaîne de caractères qui définit la configuration. Angular nous propose quelques configurations prédéfinies pour DatePipe, comme par exemple  longDate  :

<p>FaceSnap créée le {{ faceSnap.createdAt | date: 'longDate' }}</p>
Le format 'longDate' donne le nom du mois au complet, le jour du mois, puis l'année
Le format 'longDate'

Vous avez également la possibilité de créer vos propres configurations en passant une chaîne de caractères qui encode votre configuration souhaitée. Voici deux exemples :

<p>FaceSnap créée le {{ faceSnap.createdAt | date: 'd MMMM yyyy, à HH:mm' }}</p>
Date personnalisée
Date personnalisée

Vous aurez certainement remarqué que les dates apparaissent en anglais. En effet, la locale par défaut des applications Angular est en-US. Si vous le souhaitez, il est possible de changer la locale par défaut de votre application, ce qui change également le résultat des pipes.

Changez la locale par défaut

Pour changer la locale de votre application en français, il y a deux étapes.

D'abord, dans le fichier  main.ts  , enregistrez les données de locale  fr  :

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { registerLocaleData } from '@angular/common';
import * as fr from '@angular/common/locales/fr';

registerLocaleData(fr.default);

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Puis choisissez la locale fr dans  app.config.ts  :

import { ApplicationConfig, LOCALE_ID } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    { provide: LOCALE_ID, useValue: 'fr-FR' }
  ]
};

Le nom du mois apparaît en français
Une date personnalisée… en français

En résumé

  • DatePipe permet de formater les dates, et sans configuration fournit un formatage par défaut.

  • DatePipe fournit des configurations prédéfinies avec des noms comme  short,  longDate  ou  mediumTime

  • DatePipe permet également de personnaliser totalement le format d'affichage des dates avec des chaînes de caractères qui encodent le format souhaité, par exemple  'à HH:mm, le d MMMM yyyy'

 Continuons dans la découverte des pipes avec un pipe qui vous permettra de formater les chiffres – rendez-vous au prochain chapitre !

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite