Day.js-biblioteket gör det smidigt att hantera datum- och tidsoperationer i React-applikationer.

Datum- och tidshantering är avgörande för alla applikationer, och React är inget undantag. Även om JavaScript har inbyggda funktioner för datum- och tidsmanipulation, kan de vara besvärliga. Lyckligtvis kan många tredjepartsbibliotek förenkla datum- och tidshantering i React. Ett sådant bibliotek är Day.js.

Day.js är ett lättviktsbibliotek för att analysera, validera, manipulera och formatera datum och tider i JavaScript.

Installerar Day.js

De Day.js bibliotek är ett modernt alternativ till Moment.js, som är ett annat bibliotek som används för att hantera datum och tider. Day.js erbjuder ett liknande API med ett mindre fotavtryck och snabbare prestanda.

För att använda Day.js i din React-applikation måste du först installera den. Du kan göra detta genom att köra följande kommando i din terminal:

npm installera dayjs

Analysera och formatera datum och tider

Day.js tillhandahåller ett enkelt API för att analysera och formatera datum. Du kan få datum och tid med hjälp av

instagram viewer
dayjs() metoden, men först måste du importera den från Day.js-biblioteket.

Till exempel:

importera Reagera från'reagera';
importera dayjs från"dayjs";
fungeraApp() {


konst datum = dayjs();
trösta.log (datum); 


lämna tillbaka (




Datum och Time Management</p>
 </div>
 )
}


exporterastandard App

De dayjs() metoden skapar ett nytt Day.js-objekt som representerar ett specifikt datum och tid. I exemplet ovan är dayjs() metoden skapar ett Day.js-objekt som representerar aktuellt datum och tid.

I din konsol skulle Day.js-objektet se ut så här:

De dayjs() metod accepterar ett valfritt datumargument som kan vara en sträng, ett tal (Unix-tidsstämpel), ett JavaScript Date-objekt, eller ett annat Day.js-objekt. Metoden genererar ett Day.js-objekt som representerar det angivna datumargumentet.

Till exempel:

importera Reagera från'reagera';
importera dayjs från"dayjs";
fungeraApp() {


konst datum = dayjs('2023-05-01');
trösta.log (datum); // Day.js-objekt som representerar det angivna datumet


konst unixDate = dayjs(1651382400000);
trösta.log (unixDate); // Day.js-objekt som representerar det angivna datumet


lämna tillbaka (




Datum och Time Management</p>
 </div>
 )
}


exporterastandard App

Day.js-objektets utdata från detta kodblock kommer att likna det föregående kodblocket men kommer att ha olika egenskapsvärden.

För att visa datumen som genereras som Day.js-objekt måste du använda formatera() metod. De formatera() metoden för Day.js-biblioteket låter dig formatera ett Day.js-objekt som en sträng enligt en specifik formatsträng.

Metoden tar en formatsträng som argument. Strängargumentet kan innehålla en kombination av bokstäver och specialtecken, var och en med en specifik betydelse,

Till exempel:

importera Reagera från'reagera';
importera dayjs från"dayjs";
fungeraApp() {


konst datum = dayjs('2023-05-01').formatera('dddd, MMMM D, ÅÅÅÅ'); // Måndagen den 1 maj 2023
konst tid = dayjs().format('HH: mm: ss'); //09:50:23
konst unixDate = dayjs(1651382400000).formatera('MM/DD/ÅÅ'); // 05/01/22


lämna tillbaka (




{date}</p>


{unixDate}</p>


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


exporterastandard App

De datum variabel kommer att visa datumet i detta format "onsdag den 26 april 2023". Formatsträngen är 'dddd, MMMM D, ÅÅÅÅ' var dddd är veckodagen, MMMM är månaden i ord, D är månadens dag med en eller två siffror, och ÅÅÅÅ är årtalet med fyra siffror.

De unixDatum variabeln formateras som en sträng med formatsträngen 'MM/DD/ÅÅÅÅ,' som representerar månaden med två siffror, månadens dag med två siffror och året med fyra siffror.

De tid variabel visar aktuell tid i det angivna formatet. Formatsträngen är 'HH: mm: ss' där den HH representerar timmarna, den mm representerar protokollet och ss representerar sekunderna.

Manipulera datum och tider

Day.js tillhandahåller flera metoder som gör det enkelt att manipulera datum och tider. Du kan hänvisa till Day.js officiell dokumentation för att få en komplett lista över tillgängliga metoder för att manipulera datum och tider.

Till exempel:

importera Reagera från'reagera';
importera dayjs från"dayjs";
fungeraApp() {


konst datum = dayjs().add(7,"dagar").formatera('dddd, MMMM D, ÅÅÅÅ'); // Onsdagen den 16 juni 2023 
konst tid = dayjs().subtrahera(2, "timmar").formatera('HH: mm: ss'); // 07:53:00


lämna tillbaka (




{date}</p>


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


exporterastandard App

Kodblocket ovan använder Lägg till() metod för att lägga till 7 dagar till det aktuella datumet. De Lägg till() metoden låter dig lägga till en angiven tid till ett Day.js-objekt. Metoden tar två argument, hur lång tid det tar att lägga till i siffror och tidsenheten att lägga till.

Med subtrahera() metoden kan du subtrahera en viss tid från Day.js objekt. De tid variabel subtraherar 2 timmar från den aktuella tiden med hjälp av subtrahera() metod.

Visar relativ tid

Day.js tillhandahåller flera metoder inklusive från nu(), tills nu(), till(), och från() för att visa relativ tid, till exempel "2 timmar sedan" eller "om 3 dagar". För att använda dessa metoder, importera relativ tid plugin från dayjs/plugin/relativeTime i din React-applikation.

Till exempel:

importera Reagera från'reagera';
importera dayjs från"dayjs";
importera relativ tid från'dayjs/plugin/relativeTime';
fungeraApp() {


 dayjs.extend (relativeTime);

konst datum = dayjs().add(7, "dagar")
konst relativDatum = date.fromNow(); // om 7 dagar


konst datum2 = dayjs().subtract(2, "timmar");
konst relativDatum2 = datum2.tillNu(); // om 2 timmar


konst lastYear = dayjs().subtract(1, 'år');
konst diff = date.from (lastYear); // om ett år
konst diff2 = date.to (lastYear) // ett år sedan


lämna tillbaka (




{ relativDatum }</p>


{ relativDate2 }</p>


{ skillnad }</p>


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


exporterastandard App

De från nu() funktionen visar en relativ tidssträng som representerar skillnaden mellan aktuell tid och ett angivet datum. I det här exemplet är från nu() visar skillnaden mellan datum och aktuell tid.

De tills nu() funktionen liknar den från nu() funktion genom att den visar en sträng som representerar skillnaden mellan ett angivet datum och aktuell tid. När du ringer till tills nu() funktion, returnerar den en relativ tidssträng till den aktuella tiden.

Slutligen använder du från() och till() funktioner kan du visa en relativ tidssträng som representerar skillnaden mellan två angivna datum. I det här exemplet får du skillnaden mellan förra året och datum använda från() och till() funktioner.

Observera att du också kan skicka in ett valfritt booleskt argument till från nu(), tills nu(), från(), och till() metoder för att ange om suffixet ska inkluderas eller exkluderas (t.ex. "sedan" eller "in").

Till exempel:

konst datum = dayjs().add(7, "dagar")
konst relativDatum = date.fromNow(Sann); // 7 dagar
konst datum2 = dayjs().subtract(2, "timmar");
konst relativDatum2 = datum2.tillNu(Sann); // 2 timmar
konst lastYear = dayjs().subtract(1, 'år');
konst diff = date.from (lastYear, Sann) // ett år
konst diff2 = date.to (lastYear, Sann) // ett år

Godkänd falsk till argumentet kommer att visa datumen med suffixet.

Hantera datum och tid effektivt

Att hantera datum och tid är en avgörande aspekt av alla applikationer, och Day.js tillhandahåller ett lättanvänt och flexibelt bibliotek för att hantera dessa operationer i en React-applikation. Genom att integrera Day.js i ditt projekt kan du enkelt formatera datum och tider, analysera strängar och manipulera varaktigheter.

Dessutom erbjuder Day.js en rad plugins för att utöka dess funktionalitet och göra den ännu mer kraftfull. Oavsett om du bygger en enkel kalender eller ett komplext schemaläggningssystem är Day.js ett utmärkt val för att hantera datum och tid i din React-applikation.