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 :

export class AppComponent {
	public myDate: number = Date.parse('2025-12-31');
}

Exemple

Affichons notre date sans passer de paramètres au pipe :

<div>
	{{ myDate | date }}
</div>

Résultat du code exécuté :

<div>Dec 31, 2025</div>

Exemple

Maintenant, affichons un format court de la date :

<div>
	{{ myDate | date:'shortDate' }}
</div>

Résultat du code exécuté :

<div>12/31/25</div>

Exemple

Affichons notre date et découvrons en même temps quel jour de la semaine elle tombe :

<div>
	{{ myDate | date:'fullDate' }}
</div>

Résultat du code exécuté :

<div>Wednesday, December 31, 2025</div>

Exercices pratiques

Date donnée :

public myDate: number = Date.parse('2025-01-02');

Formatez-la comme suit :

'Jan 2, 2025'

Formatez la date de l'exercice précédent comme suit :

'1/2/25, 3:00 AM'

Formatez la date comme suit :

'1/2/25'

Formatez la date comme suit :

'January 2, 2025 at 3:00:00 AM GMT+3'

Formatez la date comme suit :

'Thursday, January 2, 2025'