De Day.js-bibliotheek maakt het soepel om datum- en tijdbewerkingen in React-applicaties af te handelen.

Datum- en tijdbeheer is cruciaal voor elke toepassing en React is daarop geen uitzondering. Hoewel JavaScript ingebouwde functies voor datum- en tijdmanipulatie biedt, kunnen ze omslachtig zijn. Gelukkig kunnen veel bibliotheken van derden het datum- en tijdbeheer in React vereenvoudigen. Een dergelijke bibliotheek is Day.js.

Day.js is een lichtgewicht bibliotheek voor het ontleden, valideren, manipuleren en formatteren van datums en tijden in JavaScript.

Day.js installeren

De Dag.js bibliotheek is een modern alternatief voor Moment.js, een andere bibliotheek die wordt gebruikt voor het verwerken van datums en tijden. Day.js biedt een vergelijkbare API met een kleinere voetafdruk en snellere prestaties.

Om Day.js in uw React-applicatie te gebruiken, moet u het eerst installeren. U kunt dit doen door de volgende opdracht in uw terminal uit te voeren:

npm installeren dayjs

Datums en tijden parseren en formatteren

Day.js biedt een eenvoudige API voor het ontleden en opmaken van datums. U kunt de datum en tijd opvragen met behulp van de dagjs() methode, maar eerst moet u het importeren uit de Day.js-bibliotheek.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren dagjs van'dayjs';
functieapp() {


const datum = dagjs();
troosten.log (datum); 


opbrengst (




Datum en tijdbeheer</p>
 </div>
 )
}


exporterenstandaard app

De dagjs() methode maakt een nieuw Day.js-object dat een specifieke datum en tijd vertegenwoordigt. In het bovenstaande voorbeeld is de dagjs() methode maakt een Day.js-object dat de huidige datum en tijd vertegenwoordigt.

In uw console ziet het Day.js-object er als volgt uit:

De dagjs() methode accepteert een optioneel datumargument dat een tekenreeks, een getal (Unix-tijdstempel), een JavaScript Date-object, of een ander Day.js-object. De methode genereert een Day.js-object dat het opgegeven datumargument vertegenwoordigt.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren dagjs van'dayjs';
functieapp() {


const datum = dagjs('2023-05-01');
troosten.log (datum); // Day.js-object dat de opgegeven datum vertegenwoordigt


const unixDatum = dayjs(1651382400000);
troosten.log (unixdatum); // Day.js-object dat de opgegeven datum vertegenwoordigt


opbrengst (




Datum en tijdbeheer</p>
 </div>
 )
}


exporterenstandaard app

De uitvoer van het Day.js-object van dit codeblok is vergelijkbaar met het vorige codeblok, maar heeft andere eigenschapswaarden.

Om de datums weer te geven die zijn gegenereerd als Day.js-objecten, moet u de formaat() methode. De formaat() Met de methode van de Day.js-bibliotheek kunt u een Day.js-object opmaken als een tekenreeks volgens een specifieke opmaaktekenreeks.

De methode neemt een opmaaktekenreeks als argument. Het tekenreeksargument kan een combinatie van letters en speciale tekens bevatten, elk met een specifieke betekenis,

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren dagjs van'dayjs';
functieapp() {


const datum = dagjs('2023-05-01').formaat('dddd, MMMM D, JJJJ'); // maandag 1 mei 2023
const tijd = dayjs().format('UU: mm: ss'); //09:50:23
const unixDatum = dayjs(1651382400000).formaat('MM/DD/JJ'); // 05/01/22


opbrengst (




{datum}</p>


{unixDate}</p>


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


exporterenstandaard app

De datum variabele geeft de datum weer in dit formaat 'woensdag 26 april 2023'. De formaatreeks is ‘dddd, MMMM D, JJJJ' waar dddd is de dag van de week, MMMM is de maand in woorden, D is de dag van de maand in een of twee cijfers, en JJJJ is het jaar in vier cijfers.

De unixDatum variabele is opgemaakt als een tekenreeks met behulp van de opmaaktekenreeks 'MM/DD/JJJJ,' die staat voor de maand in twee cijfers, de dag van de maand in twee cijfers en het jaar in vier cijfers.

De tijd variabele geeft de huidige tijd weer in het opgegeven formaat. De formaatreeks is ‘UU: mm: ss’ waar de HH vertegenwoordigt de uren, de mm vertegenwoordigt de minuten, en de ss vertegenwoordigt de seconden.

Datums en tijden manipuleren

Day.js biedt meerdere methoden die het gemakkelijk maken om datums en tijden te manipuleren. U kunt verwijzen naar de Dag.js officiële documentatie voor de volledige lijst met beschikbare methoden voor het manipuleren van datums en tijden.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren dagjs van'dayjs';
functieapp() {


const datum = dayjs().add(7,'dagen').formaat('dddd, MMMM D, JJJJ'); // woensdag 16 juni 2023 
const tijd = dayjs().aftrekken(2, 'uren').formaat('UU: mm: ss'); // 07:53:00


opbrengst (




{datum}</p>


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


exporterenstandaard app

Het codeblok hierboven gebruikt de toevoegen() methode om 7 dagen toe te voegen aan de huidige datum. De toevoegen() Met de methode kunt u een opgegeven hoeveelheid tijd aan een Day.js-object toevoegen. De methode heeft twee argumenten nodig, de hoeveelheid tijd om getallen op te tellen en de tijdseenheid om op te tellen.

Met de aftrekken() methode, kunt u een bepaalde hoeveelheid tijd aftrekken van de Dag.js voorwerp. De tijd variabele trekt 2 uur af van de huidige tijd met behulp van de aftrekken() methode.

Relatieve tijd weergeven

Day.js biedt verschillende methoden, waaronder vanaf nu(), tot nu toe(), naar(), En van() om de relatieve tijd weer te geven, zoals "2 uur geleden" of "over 3 dagen". Om deze methoden te gebruiken, importeert u het relatieveTijd plug-in van dayjs/plug-in/relativeTime in uw React-applicatie.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren dagjs van'dayjs';
importeren relatieveTijd van'dayjs/plug-in/relativeTime';
functieapp() {


 dayjs.extend (relatieveTijd);

const datum = dayjs().add(7, 'dagen')
const relatieveDatum = datum.vanNu(); // over 7 dagen


const datum2 = dagjs().aftrekken(2, 'uren');
const relatieveDatum2 = datum2.toNow(); // over 2 uur


const vorig jaar = dayjs().aftrekken(1, 'jaar');
const diff = datum.van (vorig jaar); // in een jaar
const diff2 = datum.tot (vorigjaar) // een jaar geleden


opbrengst (




{ relatieveDatum }</p>


{ relatieveDatum2 }</p>


{ verschil }</p>


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


exporterenstandaard app

De vanaf nu() functie geeft een relatieve tijdreeks weer die het verschil weergeeft tussen de huidige tijd en een opgegeven datum. In dit voorbeeld is de vanaf nu() geeft het verschil weer tussen datum en de huidige tijd.

De tot nu toe() functie is vergelijkbaar met de vanaf nu() functie in die zin dat het een tekenreeks weergeeft die het verschil weergeeft tussen een opgegeven datum en de huidige tijd. Wanneer u belt met de tot nu toe() functie, retourneert het een relatieve tijdreeks naar de huidige tijd.

Als laatste gebruik je de van() En naar() functies kunt u een tekenreeks voor relatieve tijd weergeven die het verschil tussen twee gespecificeerde datums weergeeft. In dit voorbeeld krijg je het verschil tussen afgelopen jaar En datum de... gebruiken van() En naar() functies.

Let op, u kunt ook een optioneel booleaans argument doorgeven aan de vanaf nu(), tot nu toe(), van(), En naar() methoden om aan te geven of het achtervoegsel moet worden opgenomen of uitgesloten (bijv. "ago" of "in").

Bijvoorbeeld:

const datum = dayjs().add(7, 'dagen')
const relatieveDatum = datum.vanNu(WAAR); // 7 dagen
const datum2 = dagjs().aftrekken(2, 'uren');
const relatieveDatum2 = datum2.totNu(WAAR); // twee uur
const vorig jaar = dayjs().aftrekken(1, 'jaar');
const diff = datum.van (vorig jaar, WAAR) // een jaar
const diff2 = datum.tot (vorigjaar, WAAR) // een jaar

Passeren vals aan het argument worden de datums met het achtervoegsel weergegeven.

Datum en tijd effectief beheren

Het beheren van datum en tijd is een cruciaal aspect van elke applicatie, en Day.js biedt een gebruiksvriendelijke en flexibele bibliotheek voor het afhandelen van deze bewerkingen in een React-applicatie. Door Day.js in uw project op te nemen, kunt u eenvoudig datums en tijden opmaken, tekenreeksen ontleden en duur manipuleren.

Bovendien biedt Day.js een reeks plug-ins om de functionaliteit uit te breiden en nog krachtiger te maken. Of u nu een eenvoudige kalender of een complex planningssysteem bouwt, Day.js is een uitstekende keuze voor het beheren van datum en tijd in uw React-applicatie.