Voilà maintenant près de quatre mois que je n’ai rien publié sur le blog. Et croyez-moi, ce n’est clairement pas l’envie qui me manquait ! En ce moment, j’ai du boulot par-dessus la tête et je manque cruellement de temps pour développer mes petits projets perso dont fait partie monpetitdev.fr. Mais passons, je compte mettre un bon coup d’accélérateur dans les mois qui viennent et je commence dès aujourd’hui en vous expliquant comment intégrer le Calendrier de Material à votre projet Angular et surtout comment le configurer pour gérer le format de date française

Le problème

Si aujourd’hui je vous parle du composant Datepicker de la librairie Material, c’est parce que je me suis un peu arraché les cheveux dessus ces derniers jours. Tout ça à cause d’un guide qui manque un peu de clarté à mon gout et d’une satanée ligne en trop dans mon fichier module qui a mis une sacrée pagaille. Du genre à vous afficher correctement une date, mais à l’enregistrer avec un jour de moins… Mais voilà, en installant et en configurant le composant correctement, ça fonctionne plutôt bien et on se retrouve avec un joli calendrier qu’on peut même customiser à son gout avec un peu de CSS au bon endroit.

Installation d’Angular Material

Angular Material est une librairie qui fournit toute une collection de composants clés en main allant du champ de saisie au menu de navigation en passant bien évidemment par le datepicker qui nous intéresse ici. De fait, pour pouvoir l’utiliser dans votre projet Angular, vous devez d’abord installer Angular Material et d’autres dépendances. Pour cela, il suffit juste d’ouvrir un terminal à la racine du dossier de votre projet et taper les lignes de commande ci-dessous :

npm i @angular/platform-browser
npm i @angular/material @angular/cdk @angular/animations
npm i @angular/material-moment-adapter

Mise en place

Une fois les différentes installations terminées, vous devriez avoir tous ce qu’il faut pour intégrer votre calendrier. Pour cela, copiez les lignes ci-dessous dans le fichier ou la partie HTML de votre composant :


<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Pour vous expliquer assez brièvement, la première ligne correspond à l’input où vous allez renseigner la date, la seconde correspond au toggle du calendrier et la dernière correspond au composant en lui-même qu’on passe en paramètre aux deux premières lignes via les attributs « for » et « matDatepicker »

Bon à savoir :

Pour info, vous n’êtes pas obligé d’utiliser un input de la librairie Material pour utiliser le composant et vous pouvez remplacer le toggle par un bouton ou un div en utilisant la méthode  « picker.open() » sur un événement clic.

Exemple :

<button (click)="picker.open()">Ouvrir</button>

C’est presque fini !

Pour que ça puisse fonctionner, il faut importer tous les modules nécessaires. Parce qu’en l’état, vous aurez droit à une magnifique page blanche avec plein d’erreurs dans la console du navigateur. Ainsi, vous devez vous rendre dans le ficher app.modules.ts de votre application et ajouter les différents modules nécessaires comme décrit ci-dessous :

import { MatFormFieldModule, MatInputModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
imports:
[
...
MatDatepickerModule,
MatFormFieldModule,
MatInputModule,
MatNativeDateModule,
BrowserAnimationsModule
...
],
providers: [
...
MatDatepickerModule
...
]
})

Après ça, et si tout se passe bien, vous devriez vous retrouver avec un petit calendrier parfaitement fonctionnel comme ci-dessous.

datepicker de Angular material

Configuration au format de date française

Comme vous pouvez le constater, le datepicker affiche une date au format US (Mois/Jour/Année), ce qui n’est pas pratique si vous souhaitez l’utiliser pour des internautes français. Pour régler ce problème, il faut ajouter les lignes ci-dessous toujours dans le fichier app.module.ts de votre application

Tout d’abord, vous devez créer l’objet MY_FORMAT (qui hérite de MatDateFormats). Cet objet permet de définir le format de la date affichée par le composant.

export const MY_FORMAT: MatDateFormats = {
parse: {
dateInput: 'DD/MM/YYYY',
},
display: {
dateInput: 'DD/MM/YYYY',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'DD/MM/YYYY',
monthYearA11yLabel: 'MMMM YYYY',
},
};

Ensuite, vous devez ajouter les trois lignes ci-dessous au niveau des providers. Elles servent dans l’ordre à initialiser les paramètres régionaux, à utiliser le format de date configuré plus haut et enfin à activer la référence de temps UTC (pour ne pas s’emmêler les pinceaux avec la time zone).

providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMAT },
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }

Et voilà, c’est terminé, comme vous pouvez le constater juste ci-dessous, la date s’affiche désormais au format français. Une fois mis à plat, je me rends compte qu’il n’y avait vraiment rien de compliqué et que je me suis pris la tête pour rien ! Comme d’habitude donc…

datepicker de Angular material au format français

Si vous souhaitez récupérer le code de cet exemple dans son intégralité, vous le trouverez juste ici -> https://angular-french-datepicker.stackblitz.io

Comme d’habitude, si vous avez une question à poser ou souhaitez apporter un éclaircissement à cet article, n’hésitez surtout pas à poster un petit commentaire.

Crédit photo : https://www.wrike.com/fr/blog/3-facons-de-creer-un-calendrier-pour-les-chefs-de-projet/

Catégories : AngularTutoriels

Marc

Développeur full-stack depuis maintenant près de 7 ans, j'ai décidé d'ouvrir ce blog afin de capitaliser mes acquis, essayer de partager mes connaissances, découvrir de nouvelles technologies et surtout échanger avec d’autres développeurs.

1 commentaire

Rodolphejs · 3 mai 2019 à 14 h 45 min

Je me suis aussi cassé les dents avant de décider de faire un Datepicker custom. Bon tuto celà-dit

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *