Formater une date en utilisant Pipe en Angular

1. Comment utiliser Date Pipe en Angular ?
2. Exemple de fuseau horaire utilisant un tube de date Angular
3. Exemple d’un tuyau de date Angular avec un emplacement de pays
4. Créez un tube de date personnalisé dans Angular :

Angular Date Pipe nous permet de formater les dates dans Angular en utilisant le format, le fuseau horaire et les détails spécifiques spécifiés. Il a des formats prédéfinis et des chaînes de format personnalisées. Dans les chaînes de format personnalisées, nous pouvons facilement personnaliser le format de date, le fuseau horaire, les paramètres régionaux du pays, etc. à l’aide de quelques étapes essentielles, nous aborderons toutes ces étapes en détail. Cet article dissipera tous vos doutes et démontrera le formatage de la date à l’aide de Pipe dans Angular à l’aide d’exemples. Commençons.

Comment utiliser Date Pipe en Angular ?

Le composant @angular/common introduit le Date Pipe. Les tuyaux peuvent être utilisés pour formater des données dans Angular, y compris des valeurs, des pourcentages, des dates et bien plus encore. Principalement, trois paramètres sont pris en compte lors de la conception d’un tuyau de date Angular.

• Format
• Time zone
• Locale

Avant de discuter des paramètres mentionnés ci-dessus, il est essentiel de connaître la syntaxe du tube de date Angular en utilisant le format, le fuseau horaire et les paramètres régionaux.

{{ date_Value | date [ : format [ : timeZone [ : locale ] ] ] }}

Paramètres et description du tuyau de date Angular

Format : en tant que paramètre de format, nous pouvons donner des formats de date Angular standard ou un format de date personnalisé. mediumDate est la valeur par défaut.

Time zone : le fuseau horaire standard est le fuseau horaire du système local de la machine de l’utilisateur. Nous pouvons donner le décalage du fuseau horaire (0530), l’UTC/GMT conventionnel (IST) ou l’acronyme du fuseau horaire de l’est des États-Unis comme paramètre supplémentaire pour ajuster le fuseau horaire.

Locale : Il indique les règles de format des paramètres régionaux qui doivent être utilisées. Si elle n’est pas définie ou configurée, la valeur par défaut est la locale de notre projet (en-US).

De plus, vous devez savoir qu’Angular est livré avec uniquement les données de paramètres régionaux en-US prêtes à l’emploi. Vous devez importer les données locales pertinentes pour localiser les dates dans n’importe quelle langue.

Liste de tous les formats de date prédéfinis dans Angular

Le tuyau de date Angular a 12 formats prédéfinis. Discutons en détail de la liste de tous ces formats de date intégrés.

• short: M/d/yy, h:mm a, 1/01/22, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'short'}}
• medium: MMM d, y, h:mm:ss a, Jan 01, 2022, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'medium'}}
• long: MMMM d, y, h:mm:ss a z, Jan 01, 2022 at 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'long'}}
• longDate: MMMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'longDate'}}
• fullDate: EEEE, MMMM d, y, Saturday, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'fullDate'}}
• shortTime: h:mm a, 11:45 PM. Its Angular datepipe code is {{todayDate | date:'shortTime'}}
• mediumTime: h:mm:ss a, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'mediumTime'}}
• longTime: h:mm:ss a z, 11:45:13 PM GMT+5. Its Angular datepipe code is {{todayDate | date:'longTime'}}
• fullTime: h:mm:ss a zzzz, 11:45:13 PM. Its Angular datepipe code is {{todayDate | date:'fullTime'}}
• full: EEEE, MMMM d, y, h:mm:ss a zzzz, Saturday, Jan 01, 2021 at 11:45:13 PM GMT+05:30. Its Angular datepipe code is {{todayDate | date:'full'}}
• shortDate: M/d/yy, 1/01/22. Its Angular datepipe code is {{todayDate | date:'shortDate'}}
• mediumDate: MMM d, y, Jan 01, 2022. Its Angular datepipe code is {{todayDate | date:'mediumDate'}}

Cliquez ici pour vérifier le format de la date et de l’heure pour plus de précisions.

Exemple de fuseau horaire utilisant un tube de date Angular

Nous pouvons donner le fuseau horaire en tant que paramètre au tube de date et au format de date pour afficher la date dans un UTC spécifique. L’écart de fuseau horaire (0530), l’UTC/GMT conventionnel (IST) ou l’acronyme de fuseau horaire continental des États-Unis sont toutes des options pour le paramètre de fuseau horaire.
Par exemple, pour afficher l’heure dans le fuseau horaire IST.

Today is {{todayDate | date:'short':'IST'}}

Today is {{todayDate | date:'short':'+05:00'}} 

Production :

Today is 1/02/19, 3:30 PM 

Exemple d’un tuyau de date Angular avec un emplacement de pays

Il est nécessaire de donner le code des paramètres régionaux du pays comme troisième argument au tube de date Angular pour afficher la date selon les normes de format des paramètres régionaux du pays, comme indiqué ci-dessous.

L’Allemagne, par exemple, utilise le German Standard Time et a un décalage horaire de +01:00. Utilisez le code de paramètres régionaux de comme paramètre dans Angular pour afficher la date et l’heure dans les paramètres régionaux allemands, comme illustré ci-dessous.

<p>The current German date time is  {{todayDate | date:'full':'+01:00':'de'}}</p>

Production :

The current German date time is Mittwoch, 5. Januar 2022 um 12:50:38 GMT+01:00

Créez un tube de date personnalisé dans Angular :

Angular utilise le format de date mediumDate par défaut. Que se passe-t-il si nous souhaitons le modifier et utiliser notre propre format unique au lieu des formats intégrés, tels que MMM d, y, h:mm: ss a ?

Cela indique l’heure comme January 01, 2022, 11:45:13 PM.

Nous afficherons beaucoup de dates dans nos applications Angular, et nous devrons passer l’argument format à chaque fois. Comme on le voit ci-dessous, nous pouvons créer notre tube de date personnalisé et l’utiliser tout au long de l’application pour contourner cela.

{{ todayDate | customDate }}

Production :

January 01, 2022, 11:45:13 PM

Suivez les instructions ci-dessous pour créer un tuyau de date personnalisé. Ajoutez le code suivant à un fichier appelé custom.datepipe.ts.

import { Pipe, PipeTransform } from '@angular/core';

  import { DatePipe } from '@angular/common';  

  @Pipe({

   name: 'customDate'

  })

  export class CustomDatePipe extends 

 DatePipe implements PipeTransform {

   transform(value: any, args?: any): any {
 return super.transform(value, " MMM d, y, h:mm:ss a ");   } }

Après cela, l’étape suivante consiste à importer CustomDatePipe et à l’ajouter au tableau de déclaration AppModule.

 import {CustomDatePipe} from './custom.datepipe';
   @NgModule({
    declarations: [
    CustomDatePipe
   ]);

Maintenant, nous sommes sur la scène où nous pouvons utiliser notre tube de date personnalisé dans le fichier de composant.

{{todayDate | customDate}}

Production :

Jan 5, 2022, 5:25:36 PM

Formats de date personnalisés :

Dans Angular, vous pouvez créer vos propres formats de date. Voici une liste complète de tous les formats de date personnalisés possibles.

Exemple de format personnalisé :

Ici, nous avons mentionné un exemple très simple de format personnalisé.

{{todayDate | date:'dd/MM/yy HH:mm'}}     

Production :

05/01/22 17:25

Si vous voulez en savoir plus sur le tuyau de date Angular, cliquez ici.