Formater les dates dans Angular

Formater les dates dans Angular se fait de la même manière que le formatage des chaînes et des nombres : via des PIPES. On va donc ici découvrir comment formater les dates à travers l’utilisation du PIPE date.

Le PIPE date

Pour les dates, si on affiche une date telle quelle dans une string interpolation {{ birthdate }} par exemple, on va se retrouver avec un affichage assez bizarre de ce genre :

Wed Aug 18 2021 20:23:55 GMT+0200 (heure d’été d’Europe centrale)

Bref, ceci n’est pas très lisible et ce n’est surement pas ce genre d’affichage auquel on s’attend quand on veut afficher une date. On veut généralement l’afficher dans un format bien défini. Par exemple : le 30 Juillet 1984. Pour se faire, on va utiliser le pipe « date » et lui passer en paramètre le format de date désiré. Ici, on veut :

• Le jour sur 2 chiffres donc : « dd »
• Le mois en toutes lettres donc : « MMMM »
• L’année sur 4 chiffres donc : « yyyy »

Pour faire le test, rien de plus simple, on va partir de notre projet hello-world et y ajouter une variable birthdate dans notre classe Type Script : app.component.ts :

…
export class ... {
birthdate = Date(1984, 7, 30);
…

Côté template html, on va donc afficher cette date avec le PIPE « date » et le format « dd MMMM yyyy ». Voici donc ce qu’on aura dans app.component.html :

…
<p>{{ birthdate | date: "dd MMMM yyyy" }}</p>
…

A présent, on obtient bien : « 30 aout 1984 » ce qui est ce que nous voulons. Si nous désirons en plus mettre en majuscules « aout », nous pouvons ajouter à la suite le PIPE « uppercase ». En effet, un PIPE peut en suivre un autre (ils peuvent être chaînés). ATTENTION à l’ordre évidemment, on a notre variable en premier puis un PIPE qui donnera la date et seulement ensuite on pourra mettre en majuscule le résultat. Voici donc le code modifié dans person.component.html :

…
<p>{{ birthdate | date: "dd MMMM yyyy" | uppercase }}</p>
…

A présent, on obtient bien : « 30 AOUT 1984 ».

Il existe des formats prédéfinis dans Angular pour les dates. On les utilise en tapant {{ birthdate | date : ‘short’ }} par exemple. Cela indique d’utiliser le type prédéfini « short ». Voici la liste des types prédéfini et ce qu’ils donnent :

Après libre à vous de passer soit ce type prédéfini en paramètre, soit une chaîne représentant le format date que vous voulez comme on l’a fait dans notre premier exemple. Pour se faire voici les différentes parties du format de date disponibles :

• Pour le jour :
  • « d » représente le jour sur minimum 1 chiffre
  • « dd » représente le jour sur 2 chiffres (un 0 complète le jour s’il est inférieur à 10). Exemple : 01/07/1984.
  • « E » « EE » ou « EEE » représente l’abréviation du jour de la semaine en toute lettres
  • « EEEE » représente le jour de la semaine en toutes lettres
  • « EEEEE » représente la première lettre du jour de la semaine
  • « EEEEEE » représente les 2 premières lettres du jour de la semaine
• Pour le mois :
  • « M » représente le mois sur minimum 1 chiffre
  • « MM » représente le mois sur 2 chiffres (un 0 complète le mois s’il est inférieur à 10). Exemple : 30/07/1984.
  • « MMM » représente le mois en toutes lettres mais abrévié sur 3 lettres maximum
  • « MMMM » représente le mois en toutes lettres
  • « MMMMM » représente la première lettre du mois
• Pour l’année :
  • « y » représente l’année
  • « yy » représente l’année sur 2 chiffres 2019 -> 19
  • « yyy » représente l’année sur minimum 3 chiffres complétée par des « 0 » à gauche si l’année est < 3 chiffres.
  • « yyyy » représente l’année sur minimum 4 chiffres complétée par des « 0 » à gauche si l’année est < 4 chiffres.
• Pour la semaine :
  • « w » représente le numéro de semaine de l’année
  • « ww » représente le numéro de semaine de l’année sur 2 chiffres complété par des « 0 » à gauche si ce nombre est < 10
  • « W » représente le numéro de la semaine dans le mois
• Pour les heures :
  • « h » représente l’heure (0-12h)
  • « hh » représente l’heure (0-12h) sur 2 chiffres complété par des « 0 » à gauche si l’heure est < 10h
  • « H » représente l’heure (0-24h)
  • « HH » représente l’heure (0-24h) sur 2 chiffres complété à gauche par des « 0 » si l’heure est < 10h
• Pour les minutes :
  • « m » représente les minutes
  • « mm » représente les minutes sur 2 chiffres
• Pour les secondes :
  • « s » représente les secondes
  • « ss » représente les secondes sur 2 chiffres

Il existe quelques autres formats mais beaucoup moins utilisés c’est pourquoi je n’en parle pas ici. J’essaie d’être complet sans vous ajouter du superflu qui vous noierait dans un océan d’informations.

En résumé

En résumé, le formatage des dates se fait avec le PIPE « date » et le format exact est passé en paramètre à ce PIPE. Pour plus de détail sur les formats de dates, voir ci-dessus. J’espère que cet article vous aura plut. N’hésitez pas à me laisser un commentaire si vous en voulez plus ou si vous avez appréciez cet article. N’oubliez pas non plus de vous abonner pour ne rien manquer. Je vous dis à très bientôt sur le blog développemen-web-facile.com.