Comment formater une date en JJ/MM/AAAA avec Angular ?
Le framework Angular possède ses propres fonctions pour gérer certains éléments que peut faire le langage JavaScript. Cela permet d'intégrer des fonctionnalités supplémentaires dans le code de vos composants. C'est par exemple le cas avec la gestion des dates.
Pour pouvoir gérer les dates, le framework Angular fournit un service qui permet notamment de transformer les dates. Il s'agit de la classe "DatePipe". Vous devez au préalable l'inclure dans votre code au sein de la directive "@Component", en tant que service ("providers"). Vous pouvez ensuite utiliser la fonction "Transform()", qui transforme un objet de la classe "Date" du langage JavaScript en date écrite dans le format de votre choix.
import { DatePipe } from '@angular/common';
@Component({
templateUrl: './name.component.html',
styleUrls: ['./name.component.scss'],
providers: [DatePipe]
})
maDate = new Date();
constructor(private datePipe: DatePipe){
this.maDate = this.datePipe.transform(this.maDate, 'dd/MM/yyyy');
}
Si vous souhaitez écrire rapidement une date dans votre code HTML, le framework fournit des formats rapides. Parmi ceux-ci, le format "shortDate' écrit la date au format "dd/MM/yy" directement dans votre code. Vous devez par contre avoir correctement configuré la variable locale du framework avec la valeur "fr_FR" pour que cela respecte le bon format.
{{maDate | date: 'shortDate' }}
À partir de la version 6 du framework, il est possible de formater une date de manière plus simple. La classe "formatDate" fournit une méthode de conversion que vous pouvez rapidement utiliser. Vous devez juste l'importer depuis la librairie "@angular/common" avant de vous en servir. La fonction prend en paramètre la date sous la forme d'un objet JavaScript de type Date, le format souhaité et la langue utilisée pour afficher les mots dans votre format, par exemple les mois.
import {formatDate} from '@angular/common';
formatDate(new Date(),'dd/MM/yyyy', 'fr');