Att hantera datum kan vara en utmaning. Tack vare `date-fns`-biblioteket blir dock datumhantering i JavaScript betydligt enklare.
Låt oss utforska `date-fns` för att förenkla våra liv. Detta bibliotek är nämligen väldigt smidigt att använda.
Installation av biblioteket
För att använda ett tredjepartsbibliotek behöver vi först konfigurera projektet med npm. Låt oss snabbt gå igenom installationsstegen.
Jag förutsätter att du har NodeJS eller en IDE installerad för att följa med.
- Navigera till den mapp där du vill arbeta.
- Använd kommandot `npm init` för att påbörja projektet.
- Svara på frågorna utifrån dina preferenser.
- Installera sedan `date-fns` med kommandot nedan:
npm install date-fns
- Skapa en fil som du kan namnge `dateFunctions.js`.
Nu är vi redo att dyka in i `date-fns`. Låt oss lära oss några av de viktigaste funktionerna i biblioteket.
`isValid`
Alla datum är inte giltiga.
Exempelvis finns inte 2021-02-30. Hur kontrollerar vi om ett datum är giltigt eller inte?
Funktionen `isValid` i `date-fns` hjälper oss att avgöra om ett angivet datum är giltigt eller ogiltigt.
Låt oss undersöka om följande kod fungerar som tänkt med avseende på datumets giltighet.
const { isValid } = require("date-fns");
console.log(isValid(new Date("2021, 02, 30")));
Om du kör ovanstående kod kommer du att se att den anser 30 februari 2021 som giltigt. Men det är ju inte korrekt!
Varför händer detta?
JavaScript konverterar den extra dagen i februari till 1 mars 2021, vilket är ett giltigt datum. För att bekräfta detta, skriv ut det nya datumet (`”2021, 02, 30″`) i konsolen.
console.log(new Date("2021, 02, 30"));
`date-fns` tillhandahåller en funktion som heter `parse` för att kringgå det här problemet. Funktionen analyserar det datum du anger och ger korrekta resultat.
Kolla in koden nedan.
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 vanlig uppgift när man arbetar med datum är att formatera dem på önskat sätt. Vi formaterar datum i olika format med hjälp av `format`-funktionen från `date-fns`.
Låt oss formatera datumet som 23-01-1993, 1993-01-23 10:43:55, tisdag 23 januari 1993, etc. Kör följande kod för att se motsvarande datum i dessa format.
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 hitta hela listan över format här.
`addDays`
Funktionen `addDays` används för att beräkna ett datum som ligger ett visst antal dagar framåt.
Med andra ord kan vi lägga till dagar till ett givet datum för att få datumet efter ett visst antal dagar. Det finns många användningsområden för detta.
Låt oss säga att du fyller år om X dagar och du är upptagen just dessa dagar. Du kanske inte kommer ihåg födelsedagen i ditt stressiga schema. Då kan du använda `addDays` för att bli påmind om födelsedagen efter X dagar. Här är 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"));
Precis som `addDays` finns det också andra funktioner som `addHours`, `subHours`, `addMinutes`, `subMinutes`, `addSeconds`, `subSeconds`, `subDays`, `addWeeks`, `subWeeks`, `addYears`, `subYears`, etc. Du kan enkelt gissa vad dessa funktioner gör bara genom deras namn.
Testa dem!
`formatDistance`
Att skriva kod för att jämföra datum från grunden är en mardröm. Men varför jämför vi ens datum egentligen?
Det finns många situationer där vi jämför datum. På sociala medier ser du till exempel meddelanden som ”för 1 minut sedan”, ”för 12 timmar sedan”, ”för 1 dag sedan”, etc. Detta är resultat av datumjämförelser mellan inläggets datum och den aktuella tidpunkten.
Funktionen `formatDistance` gör just detta. Den returnerar skillnaden mellan två givna datum.
Låt oss skriva ett program för att beräkna din ålder.
const { formatDistance } = require("date-fns");
const birthday = new Date("1956, 01, 28");
const presentDay = new Date();
console.log(`Age: ${formatDistance(presentDay, birthday)}`);
`eachDayOfInterval`
Låt oss säga att du behöver hitta namn och datum för de kommande X dagarna. `eachDayOfInterval` hjälper oss att hitta alla dagar mellan ett start- och slutdatum.
Låt oss ta reda på de 30 kommande dagarna från och med idag.
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` och `min`
Funktionerna `max` och `min` hittar det maximala respektive minsta datumet bland en grupp av angivna datum. Funktionerna i `date-fns` är mycket intuitiva och det är lätt att förstå deras syfte. Låt oss skriva lite kod.
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`
Du kan förmodligen gissa vad funktionen `isEqual` gör. Som namnet antyder används den för att kontrollera om två datum är likadana. Se exempelkoden nedan.
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));
Sammanfattning
Om vi skulle gå igenom alla funktioner i `date-fns` skulle det ta dagar. Det bästa sättet att lära sig ett bibliotek är att bekanta sig med de mest grundläggande funktionerna och sedan läsa dokumentationen för ytterligare information. Tillämpa samma strategi för `date-fns` också.
I den här handledningen har du lärt dig de grundläggande funktionerna. Om du söker efter mer detaljerad information, se dokumentationen, eller överväg att ta onlinekurser som t.ex JavaScript, jQuery och JSON.
Lycka till med kodningen! 👨💻