Moment.js is een fantastische bibliotheek voor het efficiënt omgaan met datum- en tijdbeheer binnen React-applicaties.

Het beheren van datums en tijd in React kan een uitdaging vormen voor degenen die niet vertrouwd zijn met het gebied. Gelukkig zijn er verschillende bibliotheken die je kunnen helpen met datum- en tijdbeheer in React. Een van deze bibliotheken is Moment.js.

Moment.js is een lichtgewicht bibliotheek met een eenvoudige manier om datums en tijden in JavaScript te manipuleren en op te maken.

De Moment.js-bibliotheek installeren

Moment.js bibliotheek is een pakket voor het beheren van datum- en tijdbewerkingen in JavaScript. Het installeren van de Moment.js-bibliotheek is de eerste stap in het gebruik van Moment.js in uw React-toepassing. U kunt dit doen door de volgende opdracht in uw terminal uit te voeren:

npm installatie moment

Zodra de installatie is voltooid, kunt u Moment.js gebruiken in uw React-component.

Moment.js gebruiken om datum en tijd weer te geven

U kunt Moment.js gebruiken om datums en tijden in een specifiek formaat weer te geven in uw React-app. Importeer om de bibliotheek te gebruiken

moment van het geïnstalleerde pakket.

importeren Reageer van'Reageer';
importeren moment van'moment';
functieapp() {


const datum = moment().format("MMMM DD JJJJ");
const tijd = moment().format("UU mm ss");


opbrengst (




 Vandaagde datum is { datum } 


 De tijd is { tijd } </p>
 </div>
 )
}


exporterenstandaard app

De moment() methode creëert een nieuw moment-object dat een specifiek tijdstip vertegenwoordigt. De formaat() methode formatteert een momentobject in een tekenreeksrepresentatie.

De formaat() methode neemt een tekenreeksargument dat het gewenste formaat voor het momentobject specificeert. Het tekenreeksargument kan een combinatie van letters en speciale tekens bevatten, elk met een specifieke betekenis.

Enkele van deze speciale tekens zijn:

  • JJJJ: Jaar met vier cijfers
  • JJ: Jaartal met twee cijfers
  • MM: Maand met twee cijfers
  • M: Maand met één of twee cijfers
  • MMMM: Maand in woorden
  • dd: Dag van de maand met twee cijfers
  • D: Dag van de maand met één of twee cijfers
  • Doen: Dag van de maand met het rangtelwoord
  • HH: Uur met twee cijfers
  • H: Uur met één of twee cijfers
  • mm: Minuut met twee cijfers
  • M: Minuut met één of twee cijfers
  • ss: Seconde met twee cijfers
  • S: Seconde met één of twee cijfers

Wanneer de app component in het vorige codeblok wordt weergegeven, worden de huidige datum en tijd in het opgegeven formaat op het scherm weergegeven.

De moment() methode kan een string datum- of tijdargument hebben. Wanneer de moment() methode een string datum- of tijdargument heeft, creëert het een moment-object dat die datum of tijd vertegenwoordigt. De tekenreeks kan verschillende indelingen hebben, zoals ISO 8601, RFC 2822 of Unix-tijdstempel.

Bijvoorbeeld:

const datum = moment('1998-06-23').formaat("MMMM DD JJJJ");

Moment.js gebruiken om datum en tijd te manipuleren

De Moment.js-bibliotheek biedt ook verschillende methoden voor het manipuleren van datums en tijden. Met deze methoden kunt u tijdsintervallen optellen of aftrekken, specifieke waarden voor datum- en tijdcomponenten instellen en andere toepasselijke bewerkingen uitvoeren.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren moment van'moment';
functieapp() {


const morgen = moment().add(1, 'dag').formaat("Doe MMMM, JJJJ");
const tijd = moment().aftrekken(1, 'uur').formaat("UU: mm: ss");
const vorig jaar = moment().set('jaar', 2022).set('maand', 1).formaat("Doe MMMM, JJJJ");
const uur = moment().get('uur');


opbrengst (


"App">
Morgende datum is { morgen }


Dit was de tijd: { tijd }, een uur geleden</p>


{ vorig jaar }</p>


{ uur }</p>
 </div>
 )
}


exporterenstandaard app

In dit voorbeeld jij declareer de volgende JavaScript-variabelen: morgen, tijd, afgelopen jaar, En uur. Deze vier variabelen gebruiken verschillende methoden van de Moment.js-bibliotheek om datum en tijd te manipuleren.

De morgen variabele gebruikt de toevoegen() methode om een ​​dag toe te voegen aan de huidige datum. De toevoegen() methode voegt tijd toe aan een bepaald Moment-object. De functie heeft twee argumenten nodig: een waarde voor de duur en een tekenreeks die de op te tellen tijdseenheid vertegenwoordigt. De eenheid zou kunnen zijn jaren, maanden, weken, dagen, uur, minuten, En seconden.

U kunt ook tijd aftrekken met behulp van de aftrekken() methode. In dit geval de tijd variabele gebruikt de aftrekken() methode om een ​​uur af te trekken van de huidige tijd.

De... gebruiken set() methode, de afgelopen jaar variabele stelt het jaar in op 2022 en de maand op februari (sinds januari wordt weergegeven als maand 0). De set() methode wijst een bepaalde tijdseenheid toe aan een Moment-object.

Met de krijgen() methode kunt u een specifieke tijd ophalen. De krijgen() methode heeft een enkel argument nodig, een tijdseenheid.

Moment.js gebruiken om datum en tijd te ontleden

Een andere handige functie van Moment.js is de mogelijkheid om datums en tijden uit strings te ontleden. Dit kan handig zijn bij het werken met gegevens uit externe bronnen.

Om een ​​datum of tijd uit een string te ontleden, moet u de moment() methode. In dit geval de moment() methode heeft twee argumenten nodig, de datumtekenreeks en een opmaaktekenreeks.

Hier is een voorbeeld van hoe u de moment() methode om datums en tijden te ontleden:

importeren Reageer van'Reageer';
importeren moment van'moment';
functieapp() {


const datum = moment('2920130000', 'Doen-MMMM-JJJJ').daten();
troosten.log(datum);


opbrengst (


</div>
 )
}
exporterenstandaard app

In het codeblok hierboven, moment() methode zal deze string ‘2920130000’ ontleden met behulp van de "Do-MMMM-JJJJ" formaatstring. De daten() methode converteert het moment-object naar een native JavaScript Date-object.

De daten() methode neemt geen argumenten en retourneert een JavaScript Date-object dat dezelfde datum en tijd vertegenwoordigt als het moment-object.

Relatieve tijd weergeven

Met de Moment.js-bibliotheek kunt u relatieve tijd opmaken en weergeven. Hiervoor gebruik je de vanaf nu() En tot nu toe() methoden. Deze methoden geven de tijd weer tussen een bepaalde datum en de huidige tijd.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren moment van'moment';
functieapp() {


const gisteren = moment().aftrekken(7, 'dag');
const tijd1 = gisteren.vanNu(); // 7 dagen geleden
const time2 = gisteren.toNow(); // over 7 dagen


opbrengst (




{ tijd1 }</p>


{ tijd2 }</p>
 </div>
 )
}


exporterenstandaard app

In dit voorbeeld is de vanaf nu() methode retourneert de relatieve tijd die is verstreken sinds de opgegeven datum, terwijl de tot nu toe() methode retourneert de relatieve tijd tot de huidige tijd.

Meer naar Moment.js

Moment.js is een krachtige bibliotheek die een eenvoudige manier biedt om datums en tijden in JavaScript te manipuleren en op te maken. Je hebt geleerd hoe je datums en tijden in React kunt manipuleren, weergeven en ontleden met behulp van Moment.js.

Moment.js biedt verschillende andere methoden, zoals lokaal, startOf, endOf, enzovoort. Met de verstrekte informatie bent u echter meer dan bereid om Moment.js in uw React-toepassing te gaan gebruiken.