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.

8 commentaires

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

Jamal · 22 décembre 2019 à 9 h 23 min

Bonjour et merci pour le tuto.
Le mat date foncrionne bien mais le problème que j’avais et qui persiste après suivi des étapes c’est quand on saisie la date manuellement ca marche pas au format fr. Ca marche uniquement si on fait la sélection à trvavers l’icône…

inconnu · 21 janvier 2020 à 10 h 24 min

Bonjour,

ceci ne règle absolument pas le problème de la saisie clavier qui considère que la date au format DD/MM/YYYY est invalide, et que la date au format MM/DD/YYYY est valide.

Étapes pour reproduire le problème :

1) Saisir une date directement au format DD/MM/YYYY sans passer par le datepicker => la date n’est pas réécrite pour confirmation
2) Saisir une date directement au format MM/DD/YYYY sans passer par le datepicker => la date est réécrite pour confirmation

Après je suis peut-être le seul à vouloir avoir la main sur la saisie et ne pas vouloir absolument passer par le datepicker en toutes circonstances. Toujours est-il que ma méthode reste le procédé le plus efficace pour avoir une date DD/MM identique à celle du jour, et une partie YYYY différente (des années en arrière par exemple), qui est bien plus rapidement modifiée à la main que par le datepicker.

Désolé si vous y percevez un ton sarcastique, ce n’est pas mon intention, je suis juste du genre à aimer avoir un accès souple à mes input IHM.

    Marc · 5 mai 2020 à 9 h 45 min

    Bonjour cher Inconnu

    Je ne prend rien de mal et vous avez raison de demander une solution 100% efficace
    Je me rends compte que j’ai écris ce tutoriel un peu à la vas vite et que je n’ai pas traité tous les sujets.
    Une fois que j’aurais trouvé du temps, je remettrais les choses au clair

hazem · 14 février 2020 à 14 h 23 min

Bonjour,

Merci pour tes explications, j’ai juste une question dont je cherche une réponse depuis deux semaines, les utilisateurs de mon application veulent saisir la date à la main : jj/mm/yyyy (27/12/2020) par exemple et ça ne marche pas, le calendar n’accepte pas(il n’accepte que le format mm/jj/yyyy en saisie manuel), est-ce que tu as une idée comment je peux corriger ce problème
Merci

Julie · 9 mars 2020 à 10 h 45 min

Bonjour, vos extraits de code ne sont pas lisibles, et le stackblitz ne montre que le rendu visuel et non le code source. C’est dommage j’aurais bien aimé comprendre comment exploiter ce fichu datepicker…

Ce que le rendu de code donne :
<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>

Francois · 20 avril 2020 à 11 h 16 min

Votre exemple fonctionne bien avec le sélecteur mais ne fonctionne pas avec l’input. Lorsqu’on rentre la valeur 03/01/2020 celle-ci est transformée en 01/03/2020.

Sous Angular 9 il faut. d’une part installer moment (sinon on a l’erreur @angular/material-moment-adapter” has missing dependencies : – moment
npm i moment –save
et rajouter dans les providers, comme indiqué dans la doc Material :
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
},

Cela donne :
import { MatDateFormats, MAT_DATE_LOCALE, MAT_DATE_FORMATS, DateAdapter } from ‘@angular/material/core’;
import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS, } from ‘@angular/material-moment-adapter’;

providers: [
{provide: MAT_DATE_LOCALE, useValue: ‘fr-FR’},
{ provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]},
{ provide: MAT_DATE_FORMATS, useValue: FR_FORMAT }]

    Marc · 5 mai 2020 à 9 h 33 min

    Bonjour François

    Vous avez parfaitement raison, j’ai complètement oublié de traiter ce point.
    Merci pour votre retour. Il faut maintenant que je trouve le temps de mettre à jour l’article

Laisser un commentaire

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