Date-fns: Enkel datohåndtering i JavaScript

Å manipulere datoer kan ofte være en utfordring, men med date-fns-biblioteket blir datohåndtering i JavaScript betydelig enklere.

La oss utforske date-fns grundig for å forenkle arbeidet med datoer. Dette biblioteket er kjent for sin letthet og brukervennlighet.

Installasjon av pakken

For å kunne benytte et tredjepartsbibliotek, er det nødvendig å konfigurere prosjektet ved hjelp av npm. La oss raskt gjennomgå trinnene for oppsett:

Det forutsettes at du har NodeJS installert eller en IDE klar for bruk.

• Naviger til den ønskede mappen.
• Kjør kommandoen npm init for å initialisere prosjektet.
• Besvar spørsmålene som dukker opp etter dine preferanser.
• Installer date-fns ved å kjøre følgende kommando:

npm install date-fns

• Opprett en ny fil med navnet dateFunctions.js.

Vi er nå klare til å begynne å bruke date-fns. La oss se på noen av de viktigste funksjonene i biblioteket.

isValid (Er Gyldig)

Ikke alle datostrenger er gyldige datoer.

For eksempel er 30. februar 2021 ingen reell dato. Hvordan kan vi sjekke gyldigheten av en dato?

isValid-metoden fra date-fns lar oss enkelt sjekke om en gitt dato er gyldig eller ikke.

La oss se på hvordan følgende kode håndterer gyldigheten av datoer:

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

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

Hvis du kjører koden ovenfor, vil du se at den identifiserer 30. februar 2021 som gyldig. Det er jo feil!

Hvorfor skjer dette?

JavaScript konverterer automatisk den «ekstra» dagen i februar til 1. mars 2021, som er en gyldig dato. Du kan bekrefte dette ved å skrive ut new Date("2021, 02, 30") til konsollen.

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

For å omgå dette problemet tilbyr date-fns en metode kalt parse. Denne metoden tolker datoen og returnerer korrekte resultater.

Sjekk ut 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 (Formatere)

En av de mest grunnleggende oppgavene når man jobber med datoer er å formatere dem slik man ønsker. format-metoden fra date-fns lar oss formatere datoer i ulike formater.

Formater datoen som f.eks. 23-01-1993, 1993-01-23 10:43:55 eller tirsdag 23. januar 1993. Kjør koden under for å få 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 finner en komplett oversikt over mulige formater her.

addDays (Legge til Dager)

addDays-metoden brukes for å beregne en tidsfrist som ligger et bestemt antall dager frem i tid.

Vi kan enkelt legge til et visst antall dager til en dato for å få datoen som er tilsvarende antall dager frem i tid. Metoden har en rekke bruksområder.

La oss si du har en bursdag om X antall dager, og du er opptatt i disse dager. Du husker kanskje ikke bursdagen i en hektisk hverdag. Du kan enkelt bruke addDays-metoden for å minne deg på bursdagen etter X antall dager. Se 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 tillegg til addDays finnes det andre metoder som addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, osv. Funksjonaliteten til disse metodene er lett å forstå ut fra navnene deres.

Prøv dem gjerne ut.

formatDistance (Formatere Avstand)

Å skrive kode for å sammenligne datoer fra bunnen av er komplisert. Hvorfor sammenligner vi datoer i det hele tatt?

Det er mange scenarioer hvor du har sett datosammenligninger. På sosiale medieplattformer ser du ofte tidsangivelser som «1 minutt siden», «12 timer siden», «1 dag siden», osv. Dette er basert på datosammenligning mellom innleggstidspunktet og nåtid.

formatDistance-metoden gjør det samme. Den returnerer tidsforskjellen mellom to gitte datoer.

La oss skrive et program som regner ut alderen din.

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

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

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

eachDayOfInterval (Hver Dag i Intervallet)

La oss si at du trenger å generere en liste over datoer for de neste X dagene. eachDayOfInterval-metoden hjelper deg med å generere alle datoene mellom en start- og sluttdato.

La oss finne 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"));
});

max og min

max– og min-metodene returnerer henholdsvis den største og minste datoen fra en samling datoer. Funksjonaliteten til disse metodene er enkel å forstå. La oss se på koden:

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 (Er Lik)

Funksjonen til isEqual-metoden er enkel å forstå. Som navnet antyder, brukes isEqual til å sjekke om to datoer er like. Se eksempelet under.

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

Å gå gjennom hver metode i date-fns ville tatt mye tid. Den beste måten å lære et bibliotek er å bli kjent med de viktigste funksjonene, og deretter studere dokumentasjonen for mer detaljert informasjon. Dette gjelder også for date-fns.

I denne opplæringen har du lært om de essensielle metodene. Sjekk ut den spesifikke bruken i dokumentasjonen, eller vurder å ta et nettkurs som JavaScript, jQuery og JSON.

Lykke til med kodingen! 👨‍💻