Moment.js: A dátumkönyvtár teljes magyarázata és gyakorlati példái

Informatec Digital » Idiómák » Moment.js: A dátumkönyvtár teljes magyarázata és gyakorlati példái

A dátumok és időpontok JavaScriptben való kezelése igazi kihívást jelenthet a webfejlesztők számára . Szerencsére az olyan eszközök, mint a Moment.js, jelentősen leegyszerűsítik ezt a folyamatot, az alapvető dátumformázástól kezdve az összetett manipulációs és validációs műveletekig mindent megkönnyítve. Ha valaha is frusztráltnak érezted magad, amikor a projektjeidben a dátumokat helyesen próbáltad konvertálni, összehasonlítani vagy megjeleníteni, a Moment.js valószínűleg az egyik legjobb barátod volt, vagy legalábbis érdemes megfontolnod a használatát.

Ebben a cikkben mindent elmondok, amit a Moment.js-ről tudni kell : a főbb függvényeitől és kevésbé ismert trükkjeitől kezdve a gyakorlati példákon át a más könyvtárakkal való integrációjáig, beleértve a szintaxisának és a vele elvégezhető feladatoknak a világos magyarázatát is. Megvizsgáljuk a korlátait, a legújabb frissítéseket és azt is, hogy milyen alternatívák állnak rendelkezésre, ha valami modernebbet keresel.

Mi az a Moment.js és miért lett ennyire népszerű?

A Moment.js egy JavaScript könyvtár, amelyet a dátumokkal és időpontokkal való munka megkönnyítésére terveztek . Lehetővé teszi a dátumok létrehozását, elemzését, manipulálását és megjelenítését gyakorlatilag bármilyen elképzelhető formátumban egy egyszerű, mégis hatékony szintaxissal. Évek óta ez a könyvtár a közösség elsődleges megoldása a JavaScript natív Date() objektumának korlátainak leküzdésére.

A Moment.js magja a `moment()` objektum körül forog , amely szinte bármilyen érvényes bemenetből képes dátumokat konstruálni: szöveges karakterláncokból, dátumobjektumokból, időbélyegekből vagy közvetlenül numerikus argumentumokból. Ez rendkívül rugalmassá és hasznossá teszi mindenféle projektben, a kis szkriptektől kezdve a nemzetközi időzónákat vagy történelmi feljegyzéseket kezelő vállalati alkalmazásokig.

Mi tette ilyen sikeressé? A megbízhatósága, a könnyű használhatósága, valamint a kapcsolódó eszközök és bővítmények sokfélesége . Még akkor is, ha a projekt karbantartási módba lépett, a Moment.js nagy felhasználói bázissal és kiterjedt dokumentációval rendelkezik , megerősítve ezzel pozícióját, mint vezető adatkezelő megoldás a JavaScript és a Node.js területén.

A Moment.js főbb jellemzői és előnyei

• Egyszerű és intuitív APIA Moment.js egyik legnagyobb erőssége a világos szintaxis. Néhány sorban egyszerű műveleteket végezhetsz vele, például lekérheted az aktuális dátumot, karakterláncot konvertálhatsz egy adott formátumra, vagy összetett számításokat és validációkat is végezhetsz.
• Rugalmas elemzés és formázásA dátumkarakterláncok elemzése szinte bármilyen formátumban és a kívánt kimenetre konvertálása még soha nem volt ilyen egyszerű. A Moment.js segítségével gyorsan és könnyedén formázhatja a dátumokat az egyéni prezentációkban..
• DátummanipulációA napok, hónapok, évek, hetek vagy bármely más időegység hozzáadása vagy kivonása olyan egyszerű, mint a metódusok használata add () y kivon()Ez nagyon hasznos, ha relatív dátumokkal, határidőkkel vagy dinamikusan változó időkeretekkel kell dolgoznia.
• Robusztus validációHa ellenőrizni szeretnéd, hogy egy dátum érvényes-e vagy létezik-e (például február 30.), a Moment.js megkönnyíti ezt. A metódus érvényes() Képes a dátumok formátumában vagy logikájában lévő finom hibák észlelésére.
• Időzónák és lokalizáció támogatásaKöszönet a bővítményednek pillanat-időzónaNagyon egyszerű a dátumok átváltása a különböző időzónák között. A dátumokat a felhasználó nyelvéhez és a regionális konvenciókhoz igazítva is megjelenítheti, ami kulcsfontosságú a globális alkalmazásokban.
• Bővítmény ökoszisztémaA fő könyvtáron kívül számos bővítmény is elérhető a funkcionalitás bővítésére (naptár, kompatibilitás más keretrendszerekkel, egzotikus formátumok...).

Hogyan kezdjünk hozzá a Moment.js használatához a projektben

A telepítés nagyon egyszerű . A Moment.js-t egyetlen sorral beillesztheted a HTML-kódodba:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Ha Node.js-sel vagy modern fejlesztői környezettel dolgozol, gyakori, hogy npm vagy yarn használatával telepíted:

npm install moment

Ha ez megtörtént, importálhatja a Moment.js-t a használt szintaxis szerint:

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

Dátumok létrehozása: különböző módok és gyakorlati példák

Dátumok egyszerű létrehozása

Az aktuális dátum és idő lekéréséhez egyszerűen használd moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

Egy adott dátumot argumentumok átadásával konstruálhatsz:

moment("2022-10-14"); // Crea el 14 de octubre de 2022

Egy adott karakterláncból és formátumból is kiindulhatsz, akár szigorú módban is:

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

Van natív Date objektumod?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

Dátumok formázása és megjelenítése

A Moment.js lehetővé teszi a dátumok bármilyen elképzelhető formátumban történő megjelenítését . Például az aktuális dátum nap/hónap/év formátumban történő megjelenítéséhez:

moment().format('DD/MM/YYYY');

Ha egy emberibb láncot szeretnél, használhatod:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

Néhány hasznos token a formázáshoz :

• YYYY4 számjegyű év
• MMhónap
• DD: a hónap napja
• hh o HH: idő (12 vagy 24 órás formátum)
• mmperc
• ssmásodperc
• a: de./du.

Például, ha csak az időt szeretnéd megjeleníteni:

moment().format('HH:mm:ss');

Speciális formázás tokenekkel és regionális támogatással

A Moment.js több lokalizált formátumot és fordítást támogat . Lehetőség van a nyelvek menet közbeni váltására, hogy a hónapok és napok nevei egy másik nyelven jelenjenek meg.

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

Dátummanipuláció: összeadás, kivonás és összehasonlítás

A relatív dátumokkal való munka a Moment.js egyik erőssége.

• Napok, hónapok vagy évek hozzáadása:

  moment().add(3, 'days').format('DD/MM/YYYY');

• Egységek kivonása:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• Az időszakok kezdete és vége:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

Dátumok ellenőrzése és hibák észlelése

Mielőtt bármilyen dátummal dolgoznánk, fontos ellenőrizni, hogy helyesek-e:

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

Ez megakadályozza a váratlan hibákat azokban az alkalmazásokban, amelyek dátumokat kapnak a felhasználótól.

Dátum-összehasonlítás: ellenőrizze, hogy egy dátum szerepel-e a többi között

A Moment.js számos metódust tartalmaz a dátumok összehasonlítására:

• Előtte(): Ellenőrzi, hogy az egyik dátum korábbi-e a másiknál.
• isAfter(): Ellenőrzi, hogy a dátum későbbi-e.
• isBetween(): Azt jelzi, hogy egy dátum két megadott dátum között van-e.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

Időzónák és nemzetközi dátumok kezelése

Amikor a világ különböző részein élő felhasználókkal dolgozol, az időzónák igazi fejfájást okozhatnak . A moment-timezone bővítménnyel könnyedén átválthatsz dátumokat a régiók között.

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

Ezenkívül a Moment.js képes a felhasználó regionális beállításaihoz igazított dátumokat megjeleníteni , a hónapok és napok neveinek helyes fordításával.

Főbb használati példák és haladó tippek

Dátumok közötti különbségek lekérése

Két dátum között eltelt időt különböző mértékegységekben is kiszámíthatja:

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

Relatív dátumok és emberi idők

A Moment.js nagyszerű olyan üzenetek megjelenítésére, mint a „3 nappal ezelőtt” vagy az „5 óra múlva”:

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

Emberi naptár

A calendar() függvény relatív dátumokat jelenít meg, például "tegnap 17:00-kor", "holnap 9:00-kor", így nagyon jól használható naptáralkalmazásokban.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

Évugrások és különleges napok támogatása

Azt szeretnéd tudni, hogy egy év szökőév-e?

moment([2024]).isLeapYear(); // true

Az isLeapYear() metódus közvetlenül megadja a választ.

Speciális testreszabási lehetőségek: formátumok, tokenek és szigorú elemzés

A Moment.js lehetővé teszi az egyéni karakterláncokkal és tokenekkel való munkát, így számtalan formátumban hozhat létre vagy olvashat dátumokat . Továbbá, a szigorú mód pontos egyezéseket igényel, így elkerülhetők a finom hibák és a nem kívánt meglepetések.

Például egy dátum elemzéséhez "nap/hónap/év" formátumban:

moment('12/03/2023', 'DD/MM/YYYY', true);

Gyakori tokenek és példák listája

• Év: ÉÉÉÉ (2024), ÉÉ (24), É (-500)
• HónapHH (01 – 12), HHH (január), HHHH (január)
• Día: DD (01 – 31), C (1. – 31.)
• Hora: ÓÓ (00 – 23), óó (01 – 12), pp (perc), ss (másodperc)
• IdőzónaZ, ZZ

Ezek a tokenek kombinálhatók teljesen testreszabott kimenetek létrehozásához. A teljes listát és a speciális eseteket lásd a dokumentációban.