Moment.js: Volledige uitleg en praktische voorbeelden van de datumbibliotheek

Informatic Digital » Idioom » Moment.js: Volledige uitleg en praktische voorbeelden van de datumbibliotheek

Het werken met datums en tijden in JavaScript kan een ware odyssee zijn voor ontwikkelaars van webapplicaties.Gelukkig zijn er hulpmiddelen zoals Moment.js die dit proces aanzienlijk vereenvoudigen en alles van eenvoudige datumopmaak tot complexe manipulatie- en validatiebewerkingen mogelijk maken. Als u ooit gefrustreerd bent geraakt bij het correct omrekenen, vergelijken of weergeven van datums in uw projecten, dan is Moment.js waarschijnlijk een van uw beste bondgenoten, of u zou het in ieder geval moeten overwegen.

In dit artikel vertel ik je alles wat je moet weten over Moment.js.: van de kernfuncties en minder bekende trucs tot praktische cases en de integratie met andere bibliotheken, inclusief een duidelijke uitleg van de syntaxis en de taken die het kan oplossen. We bekijken ook de beperkingen, recente updates en welke alternatieven je hebt als je op zoek bent naar iets moderners.

Wat is Moment.js en waarom is het zo populair geworden?

Moment.js is een JavaScript-bibliotheek die is ontworpen om het werken met datums en tijden een pijnloze taak te maken.Hiermee kunt u datums in elk denkbaar formaat maken, analyseren, bewerken en weergeven met een eenvoudige en krachtige syntaxis. Deze bibliotheek wordt al jaren gebruikt. De toonaangevende oplossing van de community om de beperkingen van het native Date()-object van JavaScript te overwinnen.

De kern van Moment.js draait om het object moment(), dat datums kan construeren uit vrijwel elke geldige invoer: tekstreeksen, datumobjecten, tijdstempels of zelfs numerieke argumenten. Dit maakt het extreem flexibel en bruikbaar in allerlei soorten projecten, van kleine scripts tot zakelijke applicaties die internationale tijdzones of historische gegevens beheren.

Wat het tot een succes heeft gemaakt? De betrouwbaarheid, het gebruiksgemak en de verscheidenheid aan tools en plug-ins die het biedt.Zelfs wanneer het project in de onderhoudsmodus is gegaan, Moment.js heeft een grote gebruikersbasis en uitgebreide documentatie., waarmee de positie als dé oplossing voor datums in JavaScript en Node.js verder werd versterkt.

Belangrijkste kenmerken en voordelen van Moment.js

• Eenvoudige en intuïtieve APIEen van de grootste voordelen van Moment.js is de heldere syntaxis. Je kunt er eenvoudige bewerkingen mee uitvoeren, zoals het ophalen van de huidige datum of het converteren van een string naar een specifiek formaat, of complexe berekeningen en validaties in slechts een paar regels.
• Flexibele parsing en opmaakHet parseren van datumreeksen in vrijwel elk formaat en het converteren ervan naar de gewenste uitvoer was nog nooit zo eenvoudig. Met Moment.js kunt u snel en eenvoudig datums opmaken in aangepaste presentaties..
• Datummanipulatie:Het optellen of aftrekken van dagen, maanden, jaren, weken of andere tijdseenheden is net zo eenvoudig als het gebruiken van de methoden toevoegen() y aftrekken()Dit is erg handig als u moet werken met relatieve datums, vervaldatums of tijdsbestekken die dynamisch variëren.
• Robuuste validatie: Als u wilt controleren of een datum geldig is of bestaat (bijvoorbeeld 30 februari), maakt Moment.js het u gemakkelijk. De methode is geldig() Het kan subtiele fouten in de opmaak of logica van datums detecteren.
• Ondersteuning voor tijdzones en lokalisatie: Dankzij je plugin moment-tijdzoneHet is heel eenvoudig om datums tussen verschillende tijdzones om te rekenen. Je kunt ook datums weergeven die zijn aangepast aan de taal en regionale conventies van de gebruiker, wat essentieel is in wereldwijde toepassingen.
• Plugin-ecosysteem:Naast de hoofdbibliotheek is er een ecosysteem van plug-ins om de functionaliteit uit te breiden (agenda, compatibiliteit met andere frameworks, exotische formaten...).

Aan de slag met Moment.js in uw project

De installatie is zeer eenvoudigU kunt Moment.js met één regel in uw HTML opnemen:

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

Als u met Node.js of een moderne ontwikkelomgeving werkt, is het gebruikelijk om het te installeren via npm of yarn:

npm install moment

Zodra dit is gebeurd, kunt u Moment.js importeren volgens de syntaxis die u gebruikt:

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

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

Datums aanmaken: verschillende manieren en praktische voorbeelden

Maak eenvoudig datums aan

Om de huidige datum en tijd te verkrijgen, gewoon gebruiken moment():

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

U kunt een specifieke datum construeren door argumenten door te geven:

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

U kunt ook beginnen met een gegeven tekenreeks en opmaak, zelfs in de strikte modus:

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

Heeft u een native Date-object?

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

Datums opmaken en weergeven

Moment.js Hiermee kunt u datums in elk denkbaar formaat weergevenOm bijvoorbeeld de huidige datum weer te geven als dag/maand/jaar:

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

Als u een meer humane keten wilt, kunt u het volgende gebruiken:

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

Enkele nuttige tokens voor opmaak:

• YYYY: 4-cijferig jaar
• MM: mijn
• DD: dag van de maand
• hh o HH: tijd (12- of 24-uursformaat)
• mm: minuten
• ss: seconden
• a: uur/uur

Om bijvoorbeeld alleen de tijd weer te geven:

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

Geavanceerde opmaak met tokens en regionale ondersteuning

Moment.js ondersteunt meerdere gelokaliseerde formaten en vertalingenHet is mogelijk om direct van taal te wisselen om de namen van de maand en dag in een andere taal weer te geven:

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

Datummanipulatie: optellen, aftrekken en vergelijken

Het werken met relatieve data is een van de sterke punten van Moment.js.

• Dagen, maanden of jaren toevoegen:

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

• Eenheden aftrekken:

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

• Begin en einde van de periodes:

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

Valideer data en detecteer fouten

Voordat u met data gaat werken, is het belangrijk om te controleren of deze correct zijn:

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

deze Voorkom onverwachte bugs in applicaties die data van de gebruiker ontvangen.

Datumvergelijking: controleer of een datum tussen andere datums staat

Moment.js bevat verschillende methoden om datums te vergelijken:

• isVoor(): Controleert of een datum vóór een andere ligt.
• isAfter(): Controleert of een datum later is.
• isBetween(): Geeft aan of een datum tussen twee opgegeven datums ligt.

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

Omgaan met tijdzones en internationale data

Wanneer u met gebruikers in verschillende delen van de wereld werkt, kunnen tijdzones een valkuil worden.. Met de plug-in moment-tijdzone U kunt eenvoudig datums tussen regio's omrekenen:

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"

Bovendien kan Moment.js datums weergeven die zijn aangepast aan de landinstellingen van de gebruiker., met correct vertaalde namen van de maand en de dag.

Voorbeelden van belangrijk gebruik en geavanceerde tips

Verschillen tussen datums verkrijgen

U kunt de tijd die verstrijkt tussen twee datums in verschillende eenheden berekenen:

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

Relatieve data en menselijke tijden

Moment.js is ideaal voor het weergeven van berichten zoals "3 dagen geleden" of "over 5 uur":

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

Menselijke kalender

De functie kalender() Het geeft relatieve data weer, zoals 'gisteren om 17:00 uur' of 'morgen om 9:00 uur', waardoor het zeer bruikbaar is voor agenda-apps.

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

Ondersteuning voor jaarsprongen en speciale dagen

Wil je weten of een jaar een schrikkeljaar is?

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

De methode isSchrikkeljaar() geeft u direct het antwoord.

Geavanceerde aanpassing: formaten, tokens en strikt parsen

Moment.js Hiermee kunt u met aangepaste strings en tokens werken om datums in een veelheid aan formaten te maken of te lezenBovendien vereist de strikte modus exacte overeenkomsten, zodat subtiele fouten en ongewenste verrassingen worden vermeden.

Om bijvoorbeeld een datum in de notatie "dag/maand/jaar" te parseren:

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

Lijst met veelvoorkomende tokens en voorbeelden

• Jaar: JJJJ (2024), JJ (24), J (-500)
• Maand: MM (01 – 12), MMM (januari), MMMM (januari)
• Día: DD (01 – 31), C (1e – 31e)
• Tiid: HH (00 – 23), hh (01 – 12), mm (minuten), ss (seconden)
• Tijdzone: Z, ZZ

Deze tokens kunnen worden gecombineerd om volledig aangepaste outputs te creëren. Zie de documentatie voor de volledige lijst en speciale gevallen.