Moment.js är ett fantastiskt bibliotek för att effektivt hantera datum- och tidshantering inom React-applikationer.

Att hantera datum och tid i React kan utgöra en utmaning för dem som inte känner till området. Som tur är finns det flera bibliotek som kan hjälpa dig med datum- och tidshantering i React. Ett av dessa bibliotek är Moment.js.

Moment.js är ett lättviktsbibliotek med ett enkelt sätt att manipulera och formatera datum och tider i JavaScript.

Installera Moment.js-biblioteket

Moment.js biblioteket är en paket för hantering av datum och tid i JavaScript. Att installera Moment.js-biblioteket är det första steget i att använda Moment.js i din React-applikation. Du kan göra detta genom att köra följande kommando i din terminal:

npm installationsmoment

När installationen är klar kan du använda Moment.js i din React-komponent.

Använda Moment.js för att visa datum och tid

Du kan använda Moment.js för att visa datum och tider i ett specifikt format i din React-app. För att använda biblioteket, importera ögonblick från det installerade paketet.

instagram viewer 
importera Reagera från'reagera';
importera ögonblick från'ögonblick';
fungeraApp() {


konst datum = ögonblick().format("MMMM DD ÅÅÅÅ");
konst tid = ögonblick().format("HH mm ss");


lämna tillbaka (




 I dagdatumet är { date } 


 Klockan är { tid } </p>
 </div>
 )
}


exporterastandard App

De ögonblick() metoden skapar ett nytt ögonblicksobjekt som representerar en specifik tidpunkt. De formatera() metoden formaterar ett momentobjekt till en strängrepresentation.

De formatera() metoden tar ett strängargument som anger det önskade formatet för momentobjektet. Strängargumentet kan innehålla en kombination av bokstäver och specialtecken, var och en med en specifik betydelse.

Några av dessa specialtecken är:

  • ÅÅÅÅ: Årtal med fyra siffror
  • ÅÅ: Årtal med två siffror
  • MM: Månad med två siffror
  • M: Månad med en eller två siffror
  • MMMM: Månad i ord
  • DD: Dag i månaden med två siffror
  • D: Dag i månaden med en eller två siffror
  • Do: Dag i månaden med ordningen
  • HH: Timme med två siffror
  • H: Timme med en eller två siffror
  • mm: Minute med två siffror
  • m: Minute med en eller två siffror
  • ss: Tvåa med två siffror
  • s: Andra med en eller två siffror

När App komponenten i föregående kodblock renderas, det aktuella datumet och tiden visas i det angivna formatet på skärmen.

De ögonblick() metod kan ta ett strängdatum- eller tidsargument. När ögonblick() metoden har ett strängdatum- eller tidsargument, skapar den ett momentobjekt som representerar det datumet eller tiden. Strängen kan vara i olika format, som ISO 8601, RFC 2822 eller Unix tidsstämpel.

Till exempel:

konst datum = ögonblick('1998-06-23').formatera("MMMM DD ÅÅÅÅ");

Använda Moment.js för att manipulera datum och tid

Moment.js-biblioteket tillhandahåller också flera metoder för att manipulera datum och tider. Dessa metoder låter dig lägga till eller subtrahera tidsintervall, ställa in specifika värden för datum- och tidskomponenter och utföra andra tillämpliga operationer.

Till exempel:

importera Reagera från'reagera';
importera ögonblick från'ögonblick';
fungeraApp() {


konst imorgon = ögonblick().add(1, 'dag').formatera("Gör MMMM, ÅÅÅÅ");
konst tid = moment(). subtrahera(1, 'timme').formatera("HH: mm: ss");
konst lastYear = moment().set('år', 2022).uppsättning('månad', 1).formatera("Gör MMMM, ÅÅÅÅ");
konst timme = ögonblick().get('timme');


lämna tillbaka (


"App">
I morgondatumet är { imorgon }


Det här var tiden: { time }, för en timme sedan</p>


{ förra året }</p>


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


exporterastandard App

I det här exemplet, du deklarera följande JavaScript-variabler: i morgon, tid, förra året, och timme. Dessa fyra variabler använder olika metoder i Moment.js-biblioteket för att manipulera datum och tid.

De i morgon variabeln använder Lägg till() metod för att lägga till en dag till det aktuella datumet. De Lägg till() metoden lägger till tid till ett givet Moment-objekt. Funktionen tar två argument: ett varaktighetsvärde och en sträng som representerar den tidsenhet som ska läggas till. Enheten kan vara år, månader, Veckor, dagar, timmar, minuter, och sekunder.

Du kan också subtrahera tid med hjälp av subtrahera() metod. I det här fallet tid variabeln använder subtrahera() metod för att subtrahera en timme från den aktuella tiden.

Använda uppsättning() metod, den förra året variabel anger året till 2022 och månaden till februari (eftersom januari representeras som månad 0). De uppsättning() metoden tilldelar en viss tidsenhet till ett Moment-objekt.

Med skaffa sig() metod kan du hämta en viss tid. De skaffa sig() Metoden tar ett enda argument, en tidsenhet.

Använda Moment.js för att analysera datum och tid

En annan användbar funktion hos Moment.js är dess förmåga att analysera datum och tider från strängar. Detta kan vara användbart när man arbetar med data från externa källor.

För att analysera ett datum eller en tid från en sträng måste du använda ögonblick() metod. I det här fallet ögonblick() Metoden tar två argument, datumsträngen och en formatsträng.

Här är ett exempel på hur du kan använda ögonblick() metod för att analysera datum och tider:

importera Reagera från'reagera';
importera ögonblick från'ögonblick';
fungeraApp() {


konst datum = ögonblick('2920130000', "Gör-MMMM-ÅÅÅÅ").toDate();
trösta.log(datum);


lämna tillbaka (


</div>
 )
}
exporterastandard App

I kodblocket ovan, ögonblick() metod kommer att analysera denna sträng '2920130000' med formatsträngen "Do-MMMM-YYYY". De toDate() metod konverterar momentobjektet till ett inbyggt JavaScript Date-objekt.

De toDate() metoden tar inga argument och returnerar ett JavaScript Date-objekt som representerar samma datum och tid som momentobjektet.

Visar relativ tid

Med Moment.js-biblioteket kan du formatera och visa relativ tid. För att göra detta använder du från nu() och tills nu() metoder. Dessa metoder visar tiden mellan ett givet datum och aktuell tid.

Till exempel:

importera Reagera från'reagera';
importera ögonblick från'ögonblick';
fungeraApp() {


konst igår = moment().subtrahera(7, 'dag');
konst tid1 = igår.frånNu(); // 7 dagar sedan
konst tid2 = igår.tillNu(); // om 7 dagar


lämna tillbaka (




{ tid1 }</p>


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


exporterastandard App

I det här exemplet är från nu() metod returnerar den relativa tiden som förflutit sedan det angivna datumet, medan tills nu() metod returnerar den relativa tiden fram till den aktuella tiden.

Mer till Moment.js

Moment.js är ett kraftfullt bibliotek som ger ett enkelt sätt att manipulera och formatera datum och tider i JavaScript. Du har lärt dig hur du manipulerar, visar och analyserar datum och tider i React med Moment.js.

Moment.js erbjuder flera andra metoder, som lokal, startOf, endOf och så vidare. Men med den information som tillhandahålls är du mer än beredd att börja använda Moment.js i din React-applikation.