Le pipe date en Angular

Démonstration interactive

Entrée:

Format:Short DateMedium DateLong DateFull Date

Résultat:

5 oct. 2024

Syntaxe Angular:

{{ 1728140548458 | date:'shortDate' }}

La manipulation et le formatage des dates sont des tâches courantes dans le développement d'applications web. Angular facilite grandement cette tâche grâce au pipe date. Ce pipe puissant permet de formater les dates de manière flexible et locale, répondant ainsi à divers besoins d'affichage.

Qu'est-ce que le pipe date ?

Le pipe date en Angular est un outil de transformation qui prend une date en entrée (sous forme de nombre, chaîne ou objet Date) et la convertit en une chaîne formatée selon les paramètres spécifiés.

Utilisation de base

Dans les templates

La façon la plus simple d'utiliser le pipe date est directement dans vos templates Angular :

<p>{{ today | date }}</p> <!-- Format par défaut : 'mediumDate' -->
<p>{{ today | date:'short' }}</p> <!-- Format court -->
<p>{{ today | date:'full' }}</p> <!-- Format complet -->

Dans le code TypeScript

Vous pouvez également utiliser le pipe date dans votre logique de composant. Voici un exemple :

import { Component } from '@angular/core';
import { CommonModule, DatePipe } from '@angular/common';
import { inject } from '@angular/core';

@Component({
  selector: 'app-date-formatter',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>Date originale : {{ today }}</p>
    <p>Date formatée : {{ formatDate(today) }}</p>
  `
})
export class DateFormatterComponent {
  today = new Date();
  
  private datePipe = inject(DatePipe);

  formatDate(date: Date): string | null {
    return this.datePipe.transform(date, 'fullDate');
  }
}

Formats prédéfinis

Angular propose plusieurs formats prédéfinis pour le pipe date :

• 'short': équivalent à 'M/d/yy, h:mm a' (par exemple, 6/15/15, 9:03 AM)
• 'medium': équivalent à 'MMM d, y, h:mm:ss a' (par exemple, Jun 15, 2015, 9:03:01 AM)
• 'long': équivalent à 'MMMM d, y, h:mm:ss a z' (par exemple, June 15, 2015 at 9:03:01 AM GMT+1)
• 'full': équivalent à 'EEEE, MMMM d, y, h:mm:ss a zzzz' (par exemple, Monday, June 15, 2015 at 9:03:01 AM GMT+01:00)
• 'shortDate': équivalent à 'M/d/yy' (par exemple, 6/15/15)
• 'mediumDate': équivalent à 'MMM d, y' (par exemple, Jun 15, 2015)
• 'longDate': équivalent à 'MMMM d, y' (par exemple, June 15, 2015)
• 'fullDate': équivalent à 'EEEE, MMMM d, y' (par exemple, Monday, June 15, 2015)
• 'shortTime': équivalent à 'h:mm a' (par exemple, 9:03 AM)
• 'mediumTime': équivalent à 'h:mm:ss a' (par exemple, 9:03:01 AM)
• 'longTime': équivalent à 'h:mm:ss a z' (par exemple, 9:03:01 AM GMT+1)
• 'fullTime': équivalent à 'h:mm:ss a zzzz' (par exemple, 9:03:01 AM GMT+01:00)

Formats personnalisés

Vous pouvez également créer des formats personnalisés en utilisant des caractères spéciaux. Par exemple :

<p>{{ today | date:'dd/MM/yyyy' }}</p> <!-- Format européen -->
<p>{{ today | date:'EEEE, d MMMM y' }}</p> <!-- Jour de la semaine, jour, mois et année -->

Avantages de l'utilisation du pipe date

1. Flexibilité : Offre de nombreuses options de formatage prédéfinies et personnalisées.
2. Localisation : S'adapte automatiquement à la locale de l'application.
3. Performance : Optimisé par Angular pour des performances efficaces.
4. Cohérence : Assure un formatage cohérent des dates dans toute l'application.

Résumé

Pipe	Paramètres	Type d'entrée	Description
date	value: string | number | Date	string | number | Date	Formate une date selon le format spécifié
	format?: string	string	Format de date (optionnel)
	timezone?: string	string	Fuseau horaire (optionnel)
	locale?: string	string	Locale (optionnel)