• 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 13/06/2022

Formatez les dates

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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é :

<p>Mis en ligne le {{ faceSnap.createdDate | 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>Mis en ligne le {{ faceSnap.createdDate | 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>Mis en ligne le {{ faceSnap.createdDate | date: 'dd/MM/yy, à HH:mm' }}</p>
Date personnalisée
Date personnalisée
<p>Mis en ligne {{ faceSnap.createdDate | date: 'à HH:mm, le d MMMM yyyy' }}</p>
Une autre date personnalisée
Une autre 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 faudra ajouter quelques lignes dans votre fichier  app.module.ts  :

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FaceSnapComponent } from './face-snap/face-snap.component';
import { registerLocaleData } from '@angular/common';
import * as fr from '@angular/common/locales/fr';
@NgModule({
declarations: [
AppComponent,
FaceSnapComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: LOCALE_ID, useValue: 'fr-FR'}
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor() {
registerLocaleData(fr.default);
}
}

Une fois la locale changé, vous verrez tout de suite la différence au niveau des dates. Le dernier format ci-dessus, par exemple, donne maintenant :

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 !

Exemple de certificat de réussite
Exemple de certificat de réussite