Å jobbe med datoer er ikke en lett oppgave. Men pakken date-fns gjør det enkelt å jobbe med datoene i JavaScript.
La oss dykke dypt ned i pakken date-fns for å gjøre livene våre enklere enn før. Pakkens dato-fns er lett.
Innholdsfortegnelse
Installerer pakken
Vi må sette opp prosjektet med npm for å jobbe med en tredjepartspakke. La oss raskt se trinnene for å fullføre oppsettet vårt.
Jeg antar at du har NodeJS installert eller IDE for å praktisere dette.
- Naviger til ønsket katalog du vil jobbe i.
- Kjør kommandoen npm init for å initialisere prosjektet.
- Svar på alle spørsmålene basert på dine preferanser.
- Installer nå date-fns ved å bruke kommandoen nedenfor
npm install date-fns
- Lag en fil kalt dateFunctions.js
Nå er vi klare til å hoppe inn i pakken date-fns. La oss gå og lære noen viktige metoder fra pakken.
er gyldig
Alle datoer er ikke gyldige.
For eksempel er det ingen dato som 2021-02-30. Hvordan kan vi sjekke om datoen er gyldig eller ikke?
Metoden er Gyldig fra dato-fns pakken vil hjelpe oss å finne om den gitte datoen er gyldig eller ikke.
Undersøk om følgende kode fungerer bra eller ikke med gyldigheten av datoene.
const { isValid } = require("date-fns");
console.log(isValid(new Date("2021, 02, 30")));
Hvis du utfører koden ovenfor, vil du finne at 30. februar 2021 er gyldig. Åh! Det er ikke.
Hvorfor skjer det?
JavaScript konverterer den ekstra dagen i februar til 1. mars 2021, som er en gyldig dato. For å bekrefte det, skriv ut ny Dato («2021, 02, 30») til konsollen.
console.log(new Date("2021, 02, 30"));
Pakken date-fns gir en metode kalt parse for å omgå dette problemet. Metoden analyserer datoen du har gitt, og returnerer nøyaktige resultater.
Ta en titt på koden nedenfor.
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
En av de grunnleggende bruksområdene når du jobber med datoer er å formatere dem slik vi ønsker. Vi formaterer datoene i forskjellige formater ved å bruke formatmetoden fra date-fns-pakken.
Formater datoen som 23-01-1993, 1993-01-23 10:43:55, tirsdag 23. januar 1993 osv.. Kjør følgende kode for å få den tilsvarende datoen i de nevnte formatene.
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"));
Du kan finne den komplette listen over formater her.
legge tilDager
Metoden addDays brukes til å sette en frist som er etter et visst antall dager.
Vi kan ganske enkelt legge til dager til en hvilken som helst dato for å få datoen på dagen etter noen dager. Den har mange applikasjoner.
La oss si at du har bursdag etter X dager og at du er opptatt på disse dagene. Du husker kanskje ikke bursdagen i den travle timeplanen din. Du kan ganske enkelt bruke addDays-metoden for å varsle deg om bursdagen etter X dager. Har koden.
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"));
I likhet med metoden addDays er det andre metoder som addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, etc.., Du kan enkelt gjette funksjonaliteten til metodene med navnene deres.
Prøv dem ut.
formatAvstand
Å skrive kode for å sammenligne datoer fra bunnen av er et mareritt. Hvorfor sammenligner vi datoer likevel?
Det er mange applikasjoner hvor du har sett datosammenligninger. Hvis du tar sosiale medier-nettsteder, vil det være en tagline som nevner 1 minutt siden, 12 timer siden, 1 dag siden, osv.., Her bruker vi datosammenligning fra postens dato og klokkeslett til å presentere dato og klokkeslett.
Metoden formatDistance gjør det samme. Den returnerer gapet mellom de gitte to datoene.
La oss skrive et program for å finne din alder.
const { formatDistance } = require("date-fns");
const birthday = new Date("1956, 01, 28");
const presentDay = new Date();
console.log(`Age: ${formatDistance(presentDay, birthday)}`);
everyDayOfInterval
La oss si at du må finne navn og datoer om de neste X dagene. Metoden eachDayOfInterval hjelper oss å finne dagene mellom start- og sluttdatoen.
La oss finne ut de neste 30 dagene fra i dag.
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"));
});
maks og min
Metodene maks og min finner henholdsvis maksimums- og minimumsdatoene blant de gitte datoene. Metodene i date-fns er veldig kjente og enkle å gjette funksjonaliteten til disse metodene. La oss skrive litt kode.
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])}`);
er lik
Du kan enkelt gjette funksjonaliteten til metoden er Equal. Som du tror, brukes metoden isEqual for å sjekke om to datoer er like eller ikke. Se eksempelkoden nedenfor.
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));
Konklusjon
Hvis vi snakker om hver metode i date-fns-pakken, tar det dager å fullføre. Den beste måten å lære en pakke på er å bli kjent med de essensielle metodene fra den og deretter lese dokumentasjonen for mer informasjon. Bruk samme scenario for date-fns-pakken også.
Du har lært de essensielle metodene i denne opplæringen. Søk etter den spesifikke bruken i dokumentasjon eller vurder å ta nettkurs som f.eks JavaScript, jQuery og JSON.
Lykke til med koding 👨💻