• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • 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 init pour initialiser le projet.
    • Répondez à toutes les questions en fonction de vos préférences.
    • Maintenant, installez le date-fns en 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.

    est valable

    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));
    

    le 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.

    ajouter des jours

    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)}`);
    

    chaqueDayOfInterval

    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 et 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])}`);

    est égal

    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 package, puis il faut des jours pour terminer. La meilleure façon d'apprendre un paquet est de se familiariser avec les méthodes essentielles à partir de celui-ci, puis de lire la documentation pour plus d'informations. Appliquez 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 👨‍💻