Arbeta med datum Använda date-fns i JavaScript

av

Att arbeta med datum är ingen lätt uppgift. Men paketet date-fns gör det enkelt att arbeta med datumen i JavaScript.

Låt oss djupdyka i paketet date-fns för att göra våra liv enklare än tidigare. Paketet date-fns är lätt.

Installerar paketet

Vi måste sätta upp projektet med npm för att arbeta med ett tredjepartspaket. Låt oss snabbt se stegen för att slutföra vår installation.

Jag antar att du har NodeJS installerat eller IDE för att öva på detta.

  • Navigera till önskad katalog som du vill arbeta i.
  • Kör kommandot npm init för att initiera projektet.
  • Svara på alla frågor utifrån dina önskemål.
  • Installera nu date-fns med kommandot nedan
npm install date-fns
  • Skapa en fil som heter dateFunctions.js

Nu är vi redo att hoppa in i paketet date-fns. Låt oss gå och lära oss några viktiga metoder från paketet.

är giltig

Alla datum är inte giltiga.

Till exempel finns det inget datum som 2021-02-30. Hur kan vi kontrollera om datumet är giltigt eller inte?

Metoden är Giltig från datum-fns paketet hjälper oss att hitta om det angivna datumet är giltigt eller inte.

Undersök om följande kod fungerar bra eller inte med datumens giltighet.

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

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

Om du kör ovanstående kod kommer du att upptäcka att den 30 februari 2021 är giltig. åh! Det är inte.

Varför händer det?

JavaScript konverterar den extra dagen i februari till 1 mars 2021, vilket är ett giltigt datum. För att bekräfta det, skriv ut nytt datum (”2021, 02, 30”) på konsolen.

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

Paketet date-fns tillhandahåller en metod som kallas parse för att kringgå det här problemet. Metoden tolkar det datum som du har angett och returnerar korrekta resultat.

Ta en titt på 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));

formatera

En av de grundläggande användningarna när du arbetar med datum är att formatera dem som vi vill. Vi formaterar datumen i olika format med formatmetoden från date-fns-paketet.

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 få motsvarande datum i de nämnda formaten.

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 hittar hela listan över format här.

addDays

Metoden addDays används för att sätta en deadline som är efter något antal dagar.

Helt enkelt kan vi lägga till dagar till vilket datum som helst för att få datumet för dagen efter några dagar. Den har många applikationer.

Låt oss säga att du fyller år efter X dagar och att du är upptagen de dagarna. Du kanske inte kommer ihåg födelsedagen i ditt fullspäckade schema. Du kan helt enkelt använda addDays-metoden för att meddela dig om födelsedagen efter X dagar. 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 finns det andra metoder som addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, etc.. Du kan enkelt gissa metodernas funktionalitet med deras namn.

Prova dem.

formatAvstånd

Att skriva kod för att jämföra datum från början är en mardröm. Varför jämför vi datum egentligen?

Det finns många applikationer där du har sett datumjämförelser. Om du använder webbplatser för sociala medier, kommer det en tagline som nämner för 1 minut sedan, 12 timmar sedan, 1 dag sedan, etc.. Här använder vi datumjämförelse från inläggets datum och tid för att presentera datum och tid.

Metoden formatDistance gör samma sak. Det returnerar gapet mellan de givna två datumen.

Låt oss skriva ett program för att hitta din ålder.

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

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

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

everyDayOfInterval

Låt oss säga att du måste hitta namn och datum för de kommande X dagarna. Metoden eachDayOfInterval hjälper oss att hitta dagarna mellan start- och slutdatum.

Låt oss ta reda på de kommande 30 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

Metoderna max och min hittar max- och lägsta datum bland de givna datumen. Metoderna i date-fns är mycket bekanta och lätta att gissa funktionaliteten hos dessa metoder. 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])}`);

är jämställd

Du kan enkelt gissa funktionaliteten hos metoden isEqual. Som du tror används metoden isEqual för att kontrollera om två datum är lika eller inte. 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));

Slutsats

Om vi ​​talar om varje metod i date-fns-paketet tar det dagar att slutföra. Det bästa sättet att lära sig ett paket är att bekanta sig med de väsentliga metoderna från det och sedan läsa dokumentationen för ytterligare information. Använd samma scenario för date-fns-paketet också.

Du har lärt dig de grundläggande metoderna i den här handledningen. Sök efter den specifika användningen i dokumentation eller överväg att ta onlinekurser som t.ex JavaScript, jQuery och JSON.

Glad kodning 👨‍💻