Travailler avec des dates n'est pas une tâche facile. Mais, le paquet date-fns facilite le travail avec les dates en JavaScript.
Plongeons-nous dans le package date-fns pour rendre nos vies plus faciles qu'avant. Le paquet date-fns est léger.
Installation du package
Nous devons configurer le projet avec le npm pour qu'il fonctionne avec un package tiers. Voyons rapidement les étapes pour terminer notre configuration.
Je suppose que tu as NodeJS installé or IDE pour pratiquer cela.
- Accédez au répertoire dans lequel vous souhaitez travailler.
- Exécuter la commande
npm initpour initialiser le projet. - Répondez à toutes les questions en fonction de vos préférences.
- Maintenant, installez le
date-fnsen utilisant la commande ci-dessous
npm install date-fns- Créez un fichier appelé
dateFunctions.js
Maintenant, nous sommes prêts à sauter dans le package date-fns. Allons-y et apprenons quelques méthodes essentielles du package.
isValid
Toutes les dates ne sont pas valides.
Par exemple, il n'y a pas de date comme 2021-02-30. Comment vérifier si la date est valide ou non?
Procédé isValid du date-fns le package nous aidera à déterminer si la date donnée est valide ou non.
Vérifiez si le code suivant fonctionne correctement ou non avec la validité des dates.
const { isValid } = require("date-fns");
console.log(isValid(new Date("2021, 02, 30")));
Si vous exécutez le code ci-dessus, vous trouverez 30th February 2021 est valable. Oh! Ce n'est pas.
Pourquoi cela se passe?
JavaScript convertit le jour supplémentaire de février en 1st March 2021 qui est une date valide. Pour le confirmer, imprimez new Date("2021, 02, 30") à la console.
console.log(new Date("2021, 02, 30"));
Le paquet date-fns fournit une méthode appelée parse pour contourner ce problème. La méthode parse analyse la date que vous avez donnée et renvoie des résultats précis.
Jetez un œil au 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
L'une des utilisations de base lorsque vous travaillez avec des dates est de les formater comme nous le souhaitons. Nous formalisons les dates dans différents formats en utilisant le format méthode de la date-fns paquet.
Formatez la date comme 23-01-1993, 1993-01-23 10:43:55, Tuesday, January 23rd 1993, etc., exécutez le code suivant pour obtenir la date correspondante dans les formats mentionnés.
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 pouvez trouver la liste complète des formats ici.
addDays
Procédé addDays est utilisé pour fixer un délai après un certain nombre de jours.
Simplement, nous pouvons ajouter des jours à n'importe quelle date pour obtenir la date du jour après quelques jours. Il a de nombreuses applications.
Disons que vous avez un anniversaire après X jours et que vous êtes occupé ces jours-là. Vous ne vous souvenez peut-être pas de l'anniversaire dans votre emploi du temps chargé. Vous pouvez simplement utiliser le addDays méthode pour vous informer de l'anniversaire après X jours. Ayez le code.
const { format, addDays } = require("date-fns");
const today = new Date();
// birthday after 6 days
const birthday = addDays(today, 6);
console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));
Similaire à la méthode addDays il existe d'autres méthodes comme addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, etc., Vous pouvez facilement deviner la fonctionnalité des méthodes avec leurs noms.
Essayez-les.
formatDistance
Écrire du code pour comparer les dates à partir de zéro est un cauchemar. Pourquoi comparons-nous les dates de toute façon?
Il existe de nombreuses applications où vous avez vu des comparaisons de dates. Si vous utilisez des sites Web de médias sociaux, il y aura un slogan mentionnant 1 il y a une minute, il y a 12 heures, il y a 1 jour, etc., Ici, nous utilisons la comparaison de dates depuis la date et l'heure de la publication jusqu'à la date et l'heure actuelles.
Procédé formatDistance fait la même chose. Il renvoie l'écart entre les deux dates données.
Écrivons un programme pour trouver votre âge.
const { formatDistance } = require("date-fns");
const birthday = new Date("1956, 01, 28");
const presentDay = new Date();
console.log(`Age: ${formatDistance(presentDay, birthday)}`);
eachDayOfInterval
Disons que vous devez trouver les noms et dates des X prochains jours. La méthode eachDayOfInterval nous aide à trouver les jours entre la date de début et la date de fin.
Découvrons les 30 prochains jours à partir 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 and min
Les méthodes max et min trouve respectivement les dates maximum et minimum parmi les dates données. Les méthodes dans le date-fns sont très familiers et faciles à deviner la fonctionnalité de ces méthodes. Écrivons du code.
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
Vous pouvez facilement deviner la fonctionnalité de la méthode isEqual. Comme vous pensez la méthode isEqual permet de vérifier si deux dates sont égales ou non. Consultez l'exemple de code ci-dessous.
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
Si nous parlons de chaque méthode dans le date-fns paquet, alors il faut des jours pour terminer. La meilleure façon d'apprendre n'importe quel paquet est de se familiariser avec les méthodes essentielles de celui-ci, puis de lire la documentation pour plus d'informations. Appliquer le même scénario pour le date-fns forfait aussi bien.
Vous avez appris les méthodes essentielles de ce didacticiel. Recherchez l'utilisation spécifique dans le Documentation ou envisagez de suivre des cours en ligne tels que JavaScript, jQuery et JSON.
Codage heureux 👨💻
