Utilisation des dates Utilisation de date-fns en JavaScript

Photo of author

By pierre



La manipulation des dates peut s’avérer complexe, mais le module date-fns simplifie grandement cette tâche en JavaScript.

Explorons en détail ce module pour faciliter nos développements. date-fns se distingue par sa légèreté et son efficacité.

Installation du module

L’utilisation de modules externes nécessite une configuration préalable du projet avec npm. Voici les étapes à suivre pour mettre en place notre environnement de travail :

Il est supposé que NodeJS ou un IDE sont déjà installés sur votre système.

  • Naviguez jusqu’au répertoire où vous souhaitez travailler.
  • Exécutez la commande npm init pour initialiser le projet.
  • Répondez aux questions en fonction de vos préférences.
  • Installez le module date-fns avec la commande suivante :
npm install date-fns
  • Créez un fichier nommé dateFunctions.js.

Nous sommes désormais prêts à explorer les fonctionnalités de date-fns. Découvrons quelques méthodes essentielles de ce module.

isValid

Toutes les dates ne sont pas nécessairement valides.

Par exemple, une date comme le 30 février 2021 n’existe pas. Comment vérifier si une date est valide ?

La méthode isValid du module date-fns nous permet de déterminer rapidement si une date est valide ou non.

Examinons un exemple pour évaluer la validité de dates.

const { isValid } = require("date-fns");

console.log(isValid(new Date("2021, 02, 30")));

Si vous exécutez ce code, vous observerez que le 30 février 2021 est considéré comme valide. Étonnant, n’est-ce pas ?

Pourquoi cette situation ?

En réalité, JavaScript transforme le jour supplémentaire de février en 1er mars 2021, une date tout à fait valide. Pour le confirmer, affichez la date résultante (« 2021, 02, 30 ») dans la console.

console.log(new Date("2021, 02, 30"));

Le module date-fns propose une méthode appelée parse pour résoudre ce problème. Cette méthode analyse la date fournie et renvoie des résultats exacts.

Regardez l’exemple de code ci-dessous.

const { isValid, parse } = require("date-fns");

const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());

console.log(isValid(invalidDate));
console.log(isValid(validDate));

format

Une fonctionnalité essentielle lors de la manipulation des dates est leur formatage. La méthode format de date-fns nous permet de personnaliser l’affichage des dates selon nos besoins.

Pour formater une date sous différentes formes, comme 23-01-1993, 1993-01-23 10:43:55 ou mardi 23 janvier 1993, exécutez le code suivant :

const { format } = require("date-fns");

console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));

Vous trouverez la liste complète des formats ici.

addDays

La méthode addDays est utile pour définir une échéance en ajoutant un nombre spécifique de jours à une date.

En d’autres termes, elle permet de calculer une date future en ajoutant des jours à une date de référence. Cette méthode trouve de nombreuses applications.

Imaginons que vous ayez un événement dans X jours. Grâce à la méthode addDays, vous pouvez facilement obtenir la date précise de cet événement. Voici un exemple :

const { format, addDays } = require("date-fns");

const today = new Date();

// anniversaire dans 6 jours
const birthday = addDays(today, 6);

console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));

De même, il existe des méthodes comme addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears. Leurs noms sont suffisamment explicites pour comprendre leur fonctionnalité.

N’hésitez pas à les essayer.

formatDistance

Écrire du code pour comparer des dates à partir de zéro est souvent une tâche fastidieuse. Mais pourquoi comparer des dates ?

Les comparaisons de dates sont omniprésentes dans de nombreuses applications, notamment sur les réseaux sociaux où l’on trouve des indications telles que « il y a 1 minute », « il y a 12 heures », « il y a 1 jour », etc.

La méthode formatDistance remplit cette fonction en calculant la différence entre deux dates.

Écrivons un programme pour calculer votre âge à partir de votre date de naissance.

const { formatDistance } = require("date-fns");

const birthday = new Date("1956, 01, 28");
const presentDay = new Date();

console.log(`Âge : ${formatDistance(presentDay, birthday)}`);

eachDayOfInterval

Supposons que vous ayez besoin de connaître les dates des X prochains jours. La méthode eachDayOfInterval permet de générer une liste de toutes les dates comprises entre une date de début et une date de fin.

Découvrons les 30 prochains jours à partir de la date d’aujourd’hui.

const { addDays, eachDayOfInterval, format } = require("date-fns");

const presentDay = new Date();
const after30Days = addDays(presentDay, 30);

const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });

_30Days.forEach((day) => {
   console.log(format(day, "PPPP"));
});

max et min

Les méthodes max et min identifient respectivement la date la plus récente et la date la plus ancienne parmi un ensemble de dates. Ces méthodes sont intuitives et faciles à utiliser. Voici un exemple :

const { min, max } = require("date-fns");

const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");

console.log(`Max : ${max([_1, _2, _3, _4])}`);
console.log(`Min : ${min([_1, _2, _3, _4])}`);

isEqual

La fonction de la méthode isEqual est évidente. Elle vérifie si deux dates sont identiques. Voici un exemple de code illustrant son utilisation :

const { isEqual } = require("date-fns");

const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");

console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));

Conclusion

Aborder toutes les méthodes du module date-fns prendrait beaucoup de temps. L’approche la plus efficace est de se familiariser avec les méthodes de base, puis de consulter la documentation pour plus d’informations. Appliquez cette stratégie pour approfondir vos connaissances de date-fns.

Ce tutoriel vous a présenté les méthodes essentielles. Pour une compréhension plus approfondie, référez-vous à la documentation ou envisagez des formations en ligne comme JavaScript, jQuery et JSON.

Bon développement 👨‍💻