Moment.js: Potpuno objašnjenje i praktični primjeri biblioteke datuma

Informatec Digital » Idiomi » Moment.js: Potpuno objašnjenje i praktični primjeri biblioteke datuma

Rad s datumima i vremenima u JavaScriptu može biti pravi izazov za web developere . Srećom, alati poput Moment.js značajno pojednostavljuju ovaj proces, čineći sve, od osnovnog formatiranja datuma do složenih operacija manipulacije i validacije, mnogo lakšim. Ako ste se ikada osjećali frustrirano pokušavajući ispravno konvertovati, upoređivati ​​ili prikazivati ​​datume u svojim projektima, Moment.js je vjerovatno bio jedan od vaših najboljih prijatelja, ili biste barem trebali razmisliti o njegovom korištenju.

U ovom članku ću vam reći sve što trebate znati o Moment.js -u: od njegovih glavnih funkcija i manje poznatih trikova, do praktičnih primjera i integracije s drugim bibliotekama, uključujući jasno objašnjenje njegove sintakse i zadataka koje možete s njim obaviti. Također ćemo pogledati njegova ograničenja, nedavna ažuriranja i koje alternative imate ako tražite nešto modernije.

Šta je Moment.js i zašto je postao toliko popularan?

Moment.js je JavaScript biblioteka dizajnirana da olakša rad s datumima i vremenima . Omogućava vam kreiranje, parsiranje, manipulisanje i prikazivanje datuma u gotovo svakom zamislivom formatu uz jednostavnu, ali moćnu sintaksu. Godinama je ova biblioteka bila primarno rješenje zajednice za prevazilaženje ograničenja JavaScriptovog izvornog objekta Date().

Jezgro Moment.js-a se vrti oko objekta `moment()` , koji može konstruisati datume iz gotovo bilo kojeg validnog ulaza: tekstualnih nizova, objekata Date, vremenskih oznaka ili direktno pomoću numeričkih argumenata. Ovo ga čini izuzetno fleksibilnim i korisnim u svim vrstama projekata, od malih skripti do poslovnih aplikacija koje upravljaju međunarodnim vremenskim zonama ili historijskim zapisima.

Šta ga je učinilo tako uspješnim? Njegova pouzdanost, jednostavnost korištenja i raznolikost pratećih alata i dodataka . Čak i kada je projekat ušao u režim održavanja, Moment.js održava veliku korisničku bazu i opsežnu dokumentaciju , učvršćujući svoju poziciju vodećeg rješenja za podatke u JavaScriptu i Node.js-u.

Ključne karakteristike i prednosti Moment.js-a

• Jednostavan i intuitivan APIJedna od najvećih prednosti Moment.js-a je njegova jasna sintaksa. Možete izvoditi jednostavne operacije, kao što je dobijanje trenutnog datuma ili pretvaranje stringa u određeni format, ili složene izračune i validacije u samo nekoliko redova.
• Fleksibilno parsiranje i formatiranjeParsiranje datumskih nizova gotovo bilo kojeg formata i njihovo pretvaranje u željeni izlaz nikada nije bilo lakše. Moment.js omogućava brzo i jednostavno formatiranje datuma u prilagođenim prezentacijama..
• Manipulacija datumaDodavanje ili oduzimanje dana, mjeseci, godina, sedmica ili bilo koje druge jedinice vremena jednostavno je kao korištenje metoda dodati() y oduzmi()Ovo je veoma korisno kada trebate raditi s relativnim datumima, rokovima ili vremenskim okvirima koji se dinamički mijenjaju.
• Robusna validacijaAko trebate provjeriti je li datum važeći ili postoji (na primjer, 30. februar), Moment.js vam to olakšava. Metoda isValid() Sposoban je otkriti suptilne greške u formatu ili logici datuma.
• Podrška za vremenske zone i lokalizacijuZahvaljujući vašem dodatku trenutak-vremenska zonaVrlo je jednostavno konvertovati datume između različitih vremenskih zona. Također možete prikazati datume prilagođene korisnikovom jeziku i regionalnim konvencijama, što je ključno u globalnim aplikacijama.
• Ekosistem dodatakaPored glavne biblioteke, postoji i ekosistem dodataka (plug-inova) za proširenje funkcionalnosti (kalendar, kompatibilnost s drugim frameworkovima, egzotični formati...).

Kako započeti s Moment.js u vašem projektu

Instalacija je vrlo jednostavna . Možete uključiti Moment.js u svoj HTML jednim redom:

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

Ako radite s Node.js-om ili modernim razvojnim okruženjem, uobičajeno je da ga instalirate pomoću npm-a ili yarn-a:

npm install moment

Kada se ovo uradi, možete uvesti Moment.js prema sintaksi koju koristite:

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

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

Kreiranje datuma: različiti načini i praktični primjeri

Jednostavno kreirajte datume

Da biste dobili trenutni datum i vrijeme, jednostavno koristite moment():

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

Možete konstruirati određeni datum prosljeđivanjem argumenata:

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

Također možete početi od datog niza znakova i formata, čak i u striktnom režimu:

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

Imate li izvorni objekt Date?

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

Formatiranje i prikazivanje datuma

Moment.js vam omogućava prikazivanje datuma u bilo kojem zamislivom formatu . Na primjer, za prikaz trenutnog datuma kao dan/mjesec/godina:

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

Ako želite humaniji lanac, možete koristiti:

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

Neki korisni tokeni za formatiranje :

• YYYY: 4-cifrena godina
• MMmjesec
• DD: dan u mjesecu
• hh o HHvrijeme (12-satni ili 24-satni format)
• mmminute
• ss: sekundi
• aprijepodne/popodne

Na primjer, da biste prikazali samo vrijeme:

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

Napredno formatiranje s tokenima i regionalnom podrškom

Moment.js podržava više lokaliziranih formata i prijevoda . Moguće je prebacivati ​​jezike u hodu kako bi se nazivi mjeseci i dana prikazivali na drugom jeziku.

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

Manipulacija datumima: sabiranje, oduzimanje i poređenje

Rad s relativnim datumima je jedna od snaga Moment.js-a.

• Dodajte dane, mjesece ili godine:

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

• Oduzimanje jedinica:

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

• Početak i kraj menstruacije:

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

Validirajte datume i otkrijte greške

Prije rada s datumima, ključno je provjeriti njihovu ispravnost:

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

Ovo sprečava neočekivane greške u aplikacijama koje primaju podatke od korisnika.

Poređenje datuma: provjerite da li se datum nalazi među ostalima

Moment.js uključuje nekoliko metoda za poređenje datuma:

• jePrije()Provjerava da li jedan datum prethodi drugom.
• jeAfter()Provjerava da li je datum kasniji.
• jeIzmeđu(): Označava da li se datum nalazi između dva data datuma.

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

Rukovanje vremenskim zonama i međunarodnim datumima

Prilikom rada s korisnicima u različitim dijelovima svijeta, vremenske zone mogu biti prava glavobolja . Pomoću dodatka moment-timezone možete jednostavno konvertirati datume između regija.

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"

Osim toga, Moment.js može prikazati datume prilagođene regionalnim postavkama korisnika , prikazujući ispravno prevedene nazive mjeseci i dana.

Ključni primjeri upotrebe i napredni savjeti

Dobijte razlike između datuma

Vrijeme proteklo između dva datuma možete izračunati u različitim jedinicama:

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

Relativni datumi i ljudska vremena

Moment.js je odličan za prikazivanje poruka poput "prije 3 dana" ili "za 5 sati":

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

Ljudski kalendar

Funkcija calendar () prikazuje relativne datume kao što su "jučer u 17:00", "sutra u 9:00", što je čini vrlo korisnom za aplikacije kalendara.

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

Podrška za godišnje skokove i posebne dane

Želite li znati da li je godina prijestupna?

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

Metoda isLeapYear() vam daje direktan odgovor.

Napredno prilagođavanje: formati, tokeni i striktno parsiranje

Moment.js vam omogućava rad s prilagođenim stringovima i tokenima za kreiranje ili čitanje datuma u bezbroj formata . Nadalje, strogi način rada zahtijeva tačna podudaranja, sprječavajući suptilne greške i neželjena iznenađenja.

Na primjer, da biste analizirali datum u formatu "dan/mjesec/godina":

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

Lista uobičajenih tokena i primjeri

• GodinaGGGG (2024), GG (24), G (-500)
• Mes: MM (01 – 12), MMM (jan), MMMM (januar)
• Día: DD (01 – 31), C (1. – 31.)
• planinaHH (00 – 23), hh (01 – 12), mm (minute), ss (sekunde)
• Vremenska zonaZ, ZZ

Ovi tokeni se mogu kombinovati za kreiranje potpuno prilagođenih izlaza. Pogledajte dokumentaciju za kompletnu listu i posebne slučajeve.