Formatage des dates avec les pipes dans Angular
Avec le pipe DatePipe, nous pouvons
définir un format spécifique pour la date affichée.
Ce pipe peut accepter les paramètres suivants
pour le format d'affichage de la date :
| Format | Équivalent | Exemple (pour la locale en-US) |
|---|---|---|
'short' |
'M/d/yy, h:mm a' |
12/31/25, 3:00 AM |
'medium' |
'MMM d, y, h:mm:ss a' |
Dec 31, 2025, 3:00:00 AM |
'long' |
'MMMM d, y, h:mm:ss a z' |
December 31, 2025 at 3:00:00 AM GMT+3 |
'full' |
'EEEE, MMMM d, y, h:mm:ss a zzzz' |
Wednesday, December 31, 2025 at 3:00:00 AM GMT+03:00 |
'shortDate' |
'M/d/yy' |
12/31/25 |
'mediumDate' |
'MMM d, y' |
Dec 31, 2025 |
'longDate' |
'MMMM d, y' |
December 31, 2025 |
'fullDate' |
'EEEE, MMMM d, y' |
Wednesday, December 31, 2025 |
'shortTime' |
'h:mm a' |
3:00 AM |
'mediumTime' |
'h:mm:ss a' |
3:00:00 AM |
'longTime' |
'h:mm:ss a z' |
3:00:00 AM GMT+3 |
'fullTime' |
'h:mm:ss a zzzz' |
3:00:00 AM GMT+03:00 |
Exemples
Regardons le fonctionnement du pipe sur des exemples.
Pour cela, définissons dans la classe du composant
une propriété myDate, dans laquelle nous écrirons
une date :
app/app.component.tsexport class AppComponent {
public myDate: number = Date.parse('2025-12-31');
}
Exemple
Affichons notre date sans passer de paramètres au pipe :
app/app.component.html<div>
{{ myDate | date }}
</div>
Résultat du code exécuté :
html<div>Dec 31, 2025</div>
Exemple
Maintenant, affichons un format court de la date :
app/app.component.html<div>
{{ myDate | date:'shortDate' }}
</div>
Résultat du code exécuté :
html<div>12/31/25</div>
Exemple
Affichons notre date et découvrons en même temps quel jour de la semaine elle tombe :
app/app.component.html<div>
{{ myDate | date:'fullDate' }}
</div>
Résultat du code exécuté :
html<div>Wednesday, December 31, 2025</div>
Exercices pratiques
Date donnée :
typescriptpublic myDate: number = Date.parse('2025-01-02');
Formatez-la comme suit :
typescript'Jan 2, 2025'
Formatez la date de l'exercice précédent comme suit :
typescript'1/2/25, 3:00 AM'
Formatez la date comme suit :
typescript'1/2/25'
Formatez la date comme suit :
typescript'January 2, 2025 at 3:00:00 AM GMT+3'
Formatez la date comme suit :
typescript'Thursday, January 2, 2025'