📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Le pipe date en Angular

Démonstration interactive

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 :

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

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

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

PipeParamètresType d'entréeDescription
datevalue: string | number | Datestring | number | DateFormate une date selon le format spécifié
format?: stringstringFormat de date (optionnel)
timezone?: stringstringFuseau horaire (optionnel)
locale?: stringstringLocale (optionnel)

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !