A dátumokkal való munka nem könnyű feladat. A date-fns csomag azonban megkönnyíti a dátumokkal való munkát a JavaScriptben.
Merüljünk el mélyen a date-fns csomagban, hogy könnyebbé tegyük életünket, mint korábban. A date-fns csomag könnyű.
Tartalomjegyzék
A csomag telepítése
Be kell állítanunk a projektet az npm segítségével, hogy harmadik féltől származó csomaggal működjön. Lássuk gyorsan a telepítés befejezésének lépéseit.
Feltételezem, hogy telepítve van a NodeJS vagy az IDE a gyakorlatban.
- Keresse meg a kívánt könyvtárat, amelyben dolgozni szeretne.
- Futtassa az npm init parancsot a projekt inicializálásához.
- Válaszoljon minden kérdésre preferenciája alapján.
- Most telepítse a date-fn-t az alábbi paranccsal
npm install date-fns
- Hozzon létre egy dateFunctions.js nevű fájlt
Most már készen állunk, hogy beugorjunk a date-fns csomagba. Menjünk, és tanuljunk meg néhány alapvető módszert a csomagból.
érvényes
Minden dátum nem érvényes.
Például nincs olyan dátum, mint 2021-02-30. Hogyan ellenőrizhetjük, hogy a dátum érvényes-e vagy sem?
Az isValid metódus a dátum-fns csomagból segít megállapítani, hogy az adott dátum érvényes-e vagy sem.
Vizsgálja meg, hogy a következő kód jól működik-e a dátumok érvényessége mellett.
const { isValid } = require("date-fns"); console.log(isValid(new Date("2021, 02, 30")));
Ha végrehajtja a fenti kódot, akkor 2021. február 30-a érvényes. Ó! Ez nem.
Miért történik ez?
A JavaScript a februári extra napot 2021. március 1-jévé konvertálja, ami egy érvényes dátum. A megerősítéshez nyomtasson új dátumot („2021, 02, 30”) a konzolra.
console.log(new Date("2021, 02, 30"));
A date-fns csomag egy parse nevű módszert biztosít a probléma megkerülésére. Az elemzési módszer elemzi a megadott dátumot, és pontos eredményeket ad vissza.
Tekintse meg az alábbi kódot.
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));
formátum
A dátumokkal való munka során az egyik alapvető használat a kívánt formázás. A dátumokat a date-fns csomag formázási módszerével különböző formátumokban formázzuk.
Formázza a dátumot 1993-01-23, 1993-01-23 10:43:55, kedd, 1993. január 23. stb. alakban. Futtassa a következő kódot, hogy megkapja a megfelelő dátumot az említett formátumokban.
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"));
A formátumok teljes listáját megtalálja itt.
addDays
Az addDays metódus egy bizonyos számú nap utáni határidő beállítására szolgál.
Egyszerűen bármely dátumhoz hozzáadhatunk napokat, hogy néhány nap után megkapjuk a nap dátumát. Számos alkalmazása van.
Tegyük fel, hogy X nap után van születésnapod, és azokon a napokon elfoglalt vagy. Elfoglaltságai között előfordulhat, hogy nem emlékszik a születésnapjára. Egyszerűen használhatja az addDays metódust, hogy X nap után értesítse Önt a születésnapról. Legyen a kód.
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"));
Az addDays metódushoz hasonlóan vannak más metódusok is, mint addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, stb.
Próbáld ki őket.
formátumTávolság
Kódot írni a dátumok nulláról való összehasonlítására egy rémálom. Miért hasonlítjuk össze a dátumokat?
Sok olyan alkalmazás létezik, ahol dátum-összehasonlításokat látott. Ha közösségi oldalakat veszünk, akkor ott lesz egy felirat, amely megemlíti: 1 perce, 12 órája, 1 napja stb.. Itt a dátum-összehasonlítást használjuk a bejegyzés dátumától és időpontjától a jelenlegi dátumig és időpontig.
A formatDistance metódus ugyanezt teszi. A megadott két dátum közötti különbséget adja vissza.
Írjunk programot az életkorod megállapítására.
const { formatDistance } = require("date-fns"); const birthday = new Date("1956, 01, 28"); const presentDay = new Date(); console.log(`Age: ${formatDistance(presentDay, birthday)}`);
everyDayOfInterval
Tegyük fel, hogy meg kell találnia a következő X napra vonatkozó neveket és dátumokat. Az everyDayOfInterval metódus segít megtalálni a kezdő és befejező dátum közötti napokat.
Nézzük meg a következő 30 napot mától.
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 és min
A max és min metódusok rendre megkeresik a megadott dátumok közül a maximális és minimum dátumot. A date-fn metódusai nagyon ismerősek, és könnyen kitalálható a metódusok működése. Írjunk egy kódot.
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])}`);
egyenlő
Könnyen kitalálhatja az isEqual módszer funkcionalitását. Mint gondolja, az isEqual módszerrel ellenőrizhető, hogy két dátum egyenlő-e vagy sem. Lásd az alábbi mintakódot.
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));
Következtetés
Ha minden módszerről beszélünk a date-fns csomagban, akkor napokig tart a befejezés. Bármely csomag megtanulásának legjobb módja, ha megismeri az alapvető módszereket, majd elolvassa a dokumentációt további információkért. Alkalmazza ugyanezt a forgatókönyvet a date-fns csomagra is.
Ebben az oktatóanyagban megtanulta az alapvető módszereket. Keresse meg a konkrét felhasználást a dokumentáció vagy fontolja meg online tanfolyamok elvégzését, mint pl JavaScript, jQuery és JSON.
Boldog kódolást 👨💻