Tutoriel : Moment.js - La gestion des dates

Moment.js est une librairie JavaScript populaire utilisée pour manipuler et formater des dates et des horaires. Elle offre une variété de fonctionnalités pour travailler avec des dates, telles que la conversion de dates au format ISO, la mise en forme de dates selon un modèle de chaîne de caractères, le calcul de différences de temps entre deux dates, etc.

Installation

Il existe plusieurs manières d'installer moment.js sur votre projet. Voici quelques options :

Téléchargement manuel : vous pouvez télécharger la dernière version de moment.js depuis le site Web de la librairie (https://momentjs.com/) et l'ajouter à votre projet en incluant le fichier JavaScript dans votre code HTML :

<script src="/path/to/moment.js"></script>

Utilisation de npm : si vous utilisez npm (un gestionnaire de paquets pour JavaScript) dans votre projet, vous pouvez installer moment.js en exécutant la commande suivante dans votre terminal :

npm install moment

Ensuite, vous pouvez inclure moment.js dans votre code JavaScript grâce à l'importation suivante :

import moment from "moment";

Utilisation de CDN : vous pouvez également inclure moment.js dans votre code HTML en utilisant un CDN (Content Delivery Network) tel que jsDelivr ou unpkg. Voici comment inclure moment.js à partir de jsDelivr :

<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>

Remplacez 2.29.4 par la version de moment.js que vous souhaitez utiliser. Vous trouvez les différentes versions disponibles sur le site Web de jsDelivr (https://www.jsdelivr.com/package/npm/moment).

Une fois moment.js installé et inclus dans votre projet, vous commencez à utiliser ses fonctionnalités en créant des instances de moment et en appelant ses différentes méthodes.

Formater une date

Pour formater une date avec moment.js, vous pouvez utiliser la méthode format de l'objet moment. Cette méthode prend en paramètre une chaîne de caractères qui définit le modèle de formatage souhaité, et renvoie une chaîne de caractères contenant la date formatée selon ce modèle.

Voici un exemple qui montre comment formater une date au format "jour/mois/année" avec moment.js :

let date = moment("2022-12-22");
console.log(date.format("DD/MM/YYYY")); // affiche "22/12/2022"

Dans la chaîne de caractères de formatage, vous pouvez utiliser différents caractères spéciaux qui seront remplacés par les parties de la date correspondantes :

YYYY : l'année sur 4 chiffres
MM : le mois sur 2 chiffres
DD : le jour du mois sur 2 chiffres
HH : l'heure sur 2 chiffres (au format 24 heures)
mm : les minutes sur 2 chiffres
ss : les secondes sur 2 chiffres

Voici quelques exemples de formatages de date possibles avec moment.js :

YYYY-MM-DD : 2022-12-22
DD/MM/YYYY : 22/12/2022
dddd, MMMM Do YYYY : jeudi, décembre 22e 2022

Vous pouvez trouver la liste complète des caractères spéciaux de formatage dans la documentation de moment.js : https://momentjs.com/docs/#/displaying/format/.

Il est également possible de créer des modèles de formatage personnalisés grâce à des caractères alphabétiques simples, qui seront remplacés par les parties de la date correspondantes en fonction du format de la chaîne de caractères de l'objet moment. Par exemple, pour afficher le mois en toutes lettres, vous pouvez utiliser la chaîne de caractères "MMMM" :

let date = moment("2022-12-22");
console.log(date.format("MMMM")); // affiche "décembre"

Valider une date

Pour valider une date avec moment.js, vous pouvez utiliser la méthode isValid de l'objet moment. Cette méthode renvoie true si la date est valide et false sinon.

Voici un exemple qui montre comment valider une date avec moment.js :

let date = moment("2022-12-32", "YYYY-MM-DD");
if (date.isValid()) {
  console.log("La date est valide");
} else {
  console.log("La date n'est pas valide");
}

Dans cet exemple, la date 2022-12-32 n'est pas valide, car le mois de décembre n'a que 31 jours. La méthode isValid renvoie donc false.

Il est important de noter que la méthode isValid ne vérifie pas seulement si la date est au format ISO (YYYY-MM-DD), mais également si les valeurs des différentes parties de la date (année, mois, jour) sont correctes. Par exemple, la date 2022-02-29 est valide, car février 2022 a effectivement 29 jours. Cependant, la date 2021-02-29 n'est pas valide puisque février 2021 n'a que 28 jours.

Vous pouvez aussi utiliser la méthode isValid pour valider d'autres formats de date en passant en paramètre une chaîne de caractères de formatage lors de la création de l'objet moment. Par exemple, pour valider une date au format "jour/mois/année" :

let date = moment("22/12/2022", "DD/MM/YYYY");
if (date.isValid()) {
  console.log("La date est valide");
} else {
  console.log("La date n'est pas valide");
}

Pour en savoir plus sur les différents formats de date géré par moment.js, vous pouvez consulter la documentation de la librairie : https://momentjs.com/docs/#/parsing/string-format/.

Manipuler les dates

moment.js offre de nombreuses méthodes pour manipuler les dates. Voici quelques exemples de ce que vous pouvez faire avec moment.js :

Calculer la différence entre deux dates : vous pouvez utiliser la méthode diff de l'objet moment pour calculer la différence entre deux dates en années, mois, jours, heures, minutes ou secondes. Par exemple, pour calculer la différence en jours entre deux dates :

let date1 = moment("2022-12-22");
let date2 = moment("2023-01-01");
let diff = date2.diff(date1, "days");
console.log(diff); // affiche "9"

Formater une date dans un fuseau horaire spécifique : vous pouvez utiliser la méthode tz de l'objet moment pour formater une date dans un fuseau horaire spécifique. Par exemple, pour afficher une date au fuseau horaire de Paris :

let date = moment("2022-12-22");
console.log(date.tz("Europe/Paris").format("YYYY-MM-DD HH:mm:ss Z")); // affiche "2022-12-22 00:00:00 +01:00"

Convertir une date dans un autre fuseau horaire : vous pouvez utiliser la méthode utc de l'objet moment pour convertir une date dans le fuseau horaire UTC (Coordinated Universal Time). Par exemple, pour convertir une date au fuseau horaire de Paris en UTC :

let date = moment.tz("2022-12-22", "Europe/Paris");
console.log(date.utc().format("YYYY-MM-DD HH:mm:ss Z")); // affiche "2022-12-22 00:00:00 +00:00"

Il existe de nombreuses autres méthodes disponibles dans moment.js pour manipuler les dates. Vous pouvez trouver la liste complète de ces méthodes dans la documentation de la librairie : https://momentjs.com/docs/.