Format de date en Angular

1. Date Pipe en Angular
2. Exemples de tuyaux de date Angular
3. Liste des formats de date prédéfinis dans Angular

Nous présenterons comment utiliser, modifier ou ajouter des éléments et afficher les dates d’un fuseau horaire au format date à l’aide de DatePipe dans Angular.

Date Pipe en Angular

Le tube de date Angular est utilisé pour formater les dates dans Angular en fonction du format de date fourni, du fuseau horaire et des informations sur les paramètres régionaux du pays.

En utilisant le DatePipe, nous pouvons facilement convertir un objet de date, un nombre ou une chaîne de date ISO en fonction de formats de date Angular prédéfinis ou de formats de date Angular personnalisés.

Angular DatePipe accepte trois paramètres : format, timezone et locale.

“formater”

Nous pouvons passer des formats de date prédéfinis ou des formats de date personnalisés dans les paramètres de format.

fuseau horaire

Dans le paramètre fuseau horaire, le fuseau horaire par défaut est le fuseau horaire système local de la machine de l’utilisateur. Nous pouvons changer le fuseau horaire en passant le décalage du fuseau horaire (‘0510’) ou la norme UTC/GMT (CET) ou l’abréviation du fuseau horaire continental des États-Unis, et c’est un paramètre facultatif.

localisation

locale représente les règles de format de paramètres régionaux à utiliser. La valeur par défaut de la locale est la locale de notre projet (en_US) si elle est définie ou non définie. Les paramètres régionaux sont un paramètre facultatif.

Exemples de tuyaux de date Angular

Nous aborderons quelques exemples avec différents formats de date pour mieux comprendre Angular DatePipe.

Tout d’abord, nous allons ajouter ce code dans notre app.component.ts.

#angular

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  today: Date = new Date();
  pipe = new DatePipe('en-US');
  todayWithPipe = null;
  ngOnInit(): void {
    this.todayWithPipe = this.pipe.transform(Date.now(), 'dd/MM/yyyy');
  }
}

Nous avons importé DatePipe de @angular/common dans le code ci-dessus. Nous avons exporté une classe AppComponent implémentée sur Initial, à l’intérieur de laquelle nous avons créé un nouveau DatePipe avec la locale en-US.

Nous allons ajouter du code à app.component.html pour afficher la date avec notre format de date prédéfini dd/MM/yyyy.

<div>Today Date is: {{ todayWithPipe }}</div>

Production :

Liste des formats de date prédéfinis dans Angular

Angular DatePipe a 12 formats prédéfinis, comme indiqué dans le tableau ci-dessus. Mais nous pouvons également créer nos formats de date personnalisés et inclure d’autres éléments comme l’ère, la semaine de l’année, la semaine du mois, le jour du mois, etc.