At arbejde med datoer er ikke en nem opgave. Men pakken date-fns gør det nemt at arbejde med datoerne i JavaScript.
Lad os dykke dybt ned i pakkens dato-fns for at gøre vores liv nemmere end før. Pakkens dato-fns er let.
Indholdsfortegnelse
Installation af pakken
Vi skal konfigurere projektet med npm for at arbejde med en tredjepartspakke. Lad os hurtigt se trinene for at fuldføre vores opsætning.
Jeg antager, at du har NodeJS installeret eller IDE for at øve dette.
- Naviger til den ønskede mappe, som du vil arbejde i.
- Kør kommandoen npm init for at initialisere projektet.
- Besvar alle spørgsmålene baseret på dine præferencer.
- Installer nu date-fns ved hjælp af kommandoen nedenfor
npm install date-fns
- Opret en fil kaldet dateFunctions.js
Nu er vi klar til at springe ind i pakkens dato-fns. Lad os gå og lære nogle væsentlige metoder fra pakken.
er gyldig
Alle datoer er ikke gyldige.
For eksempel er der ingen dato som 2021-02-30. Hvordan kan vi kontrollere, om datoen er gyldig eller ej?
Metoden er Valid fra dato-fns pakken vil hjælpe os med at finde ud af, om den givne dato er gyldig eller ej.
Undersøg, om følgende kode fungerer fint eller ej med gyldigheden af datoerne.
const { isValid } = require("date-fns");
console.log(isValid(new Date("2021, 02, 30")));
Hvis du udfører ovenstående kode, vil du opdage, at den 30. februar 2021 er gyldig. Åh! Det er ikke.
Hvorfor sker det?
JavaScript konverterer den ekstra dag i februar til 1. marts 2021, hvilket er en gyldig dato. For at bekræfte det, udskriv ny Dato (“2021, 02, 30”) til konsollen.
console.log(new Date("2021, 02, 30"));
Pakken date-fns giver en metode kaldet parse til at løse dette problem. Metoden parser den dato, du har angivet, og returnerer nøjagtige resultater.
Tag et kig på nedenstående kode.
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 af de grundlæggende brug, når du arbejder med datoer, er at formatere dem, som vi ønsker. Vi formaterer datoerne i forskellige formater ved hjælp af formatmetoden fra date-fns-pakken.
Formater datoen som 23-01-1993, 1993-01-23 10:43:55, tirsdag den 23. januar 1993 osv.. Kør følgende kode for at få den tilsvarende dato i de nævnte formater.
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 finde den komplette liste over formater her.
tilføje Dage
Metoden addDays bruges til at sætte en deadline, der er efter et vist antal dage.
Simpelthen kan vi tilføje dage til enhver dato for at få datoen for dagen efter nogle dage. Det har mange applikationer.
Lad os sige, at du har fødselsdag efter X dage, og du har travlt på de dage. Du husker måske ikke fødselsdagen i din travle tidsplan. Du kan blot gøre brug af addDays-metoden til at give dig besked om fødselsdagen efter X dage. 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 lighed med metoden addDays er der andre metoder som addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears osv.., Du kan nemt gætte metodernes funktionalitet med deres navne.
Prøv dem.
formatAfstand
At skrive kode til at sammenligne datoer fra bunden er et mareridt. Hvorfor sammenligner vi datoer overhovedet?
Der er mange applikationer, hvor du har set datosammenligninger. Hvis du tager sociale medier hjemmesider, vil der være en tagline, der nævner 1 minut siden, 12 timer siden, 1 dag siden osv.. Her bruger vi datosammenligning fra postens dato og klokkeslæt til at præsentere dato og klokkeslæt.
Metoden formatDistance gør det samme. Det returnerer afstanden mellem de givne to datoer.
Lad os skrive et program for at finde 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
Lad os sige, at du skal finde navne og datoer om de næste X dage. Metoden everyDayOfInterval hjælper os med at finde dagene mellem start- og slutdatoen.
Lad os finde ud af de næste 30 dage 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"));
});
max og min
Metoderne max og min finder henholdsvis maksimum- og minimumsdatoer blandt de givne datoer. Metoderne i date-fns er meget velkendte og lette at gætte funktionaliteten af disse metoder. Lad os skrive noget 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 Lige
Du kan nemt gætte funktionaliteten af metoden er Equal. Som du tror, bruges metoden isEqual til at kontrollere, om to datoer er lige store eller ej. 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));
Konklusion
Hvis vi taler om hver metode i date-fns-pakken, så tager det dage at fuldføre. Den bedste måde at lære en pakke på er at blive fortrolig med de væsentlige metoder fra den og derefter læse dokumentationen for yderligere information. Anvend også det samme scenarie for date-fns-pakken.
Du har lært de væsentlige metoder i denne tutorial. Søg efter den specifikke brug i dokumentation eller overvej at tage online kurser som f.eks JavaScript, jQuery og JSON.
Glædelig kodning 👨💻