Appearance
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
- Flexibilité : Offre de nombreuses options de formatage prédéfinies et personnalisées.
- Localisation : S'adapte automatiquement à la locale de l'application.
- Performance : Optimisé par Angular pour des performances efficaces.
- 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) |