Day.js-biblioteket gør det nemt at håndtere dato- og klokkeslætshandlinger i React-applikationer.

Dato- og tidsstyring er afgørende for enhver applikation, og React er ingen undtagelse. Selvom JavaScript giver indbyggede dato- og tidsmanipulationsfunktioner, kan de være besværlige. Heldigvis kan mange tredjepartsbiblioteker forenkle dato- og tidsstyring i React. Et sådant bibliotek er Day.js.

Day.js er et letvægtsbibliotek til at analysere, validere, manipulere og formatere datoer og klokkeslæt i JavaScript.

Installerer Day.js

Det Day.js bibliotek er et moderne alternativ til Moment.js, som er et andet bibliotek, der bruges til at håndtere datoer og tidspunkter. Day.js tilbyder en lignende API med et mindre fodaftryk og hurtigere ydeevne.

For at bruge Day.js i din React-applikation skal du først installere den. Du kan gøre dette ved at køre følgende kommando i din terminal:

npm installer dayjs

Parsing og formatering af datoer og tidspunkter

Day.js giver en simpel API til parsing og formatering af datoer. Du kan få dato og klokkeslæt ved hjælp af

instagram viewer
dayjs() metode, men først skal du importere den fra Day.js-biblioteket.

For eksempel:

importere Reagere fra'reagere';
importere dayjs fra'dayjs';
fungereApp() {


konst dato = dayjs();
konsol.log (dato); 


Vend tilbage (




Dato og tidsstyring</p>
 </div>
 )
}


eksportStandard App

Det dayjs() metoden opretter et nyt Day.js-objekt, der repræsenterer en bestemt dato og tid. I eksemplet ovenfor er dayjs() metoden opretter et Day.js-objekt, der repræsenterer den aktuelle dato og klokkeslæt.

I din konsol ville Day.js-objektet se sådan ud:

Det dayjs() metode accepterer et valgfrit datoargument, som kan være en streng, et tal (Unix-tidsstempel), et JavaScript Date-objekt, eller et andet Day.js-objekt. Metoden vil generere et Day.js-objekt, der repræsenterer det angivne datoargument.

For eksempel:

importere Reagere fra'reagere';
importere dayjs fra'dayjs';
fungereApp() {


konst dato = dayjs('2023-05-01');
konsol.log (dato); // Day.js-objekt, der repræsenterer den angivne dato


konst unixDate = dayjs(1651382400000);
konsol.log (unixDate); // Day.js-objekt, der repræsenterer den angivne dato


Vend tilbage (




Dato og tidsstyring</p>
 </div>
 )
}


eksportStandard App

Day.js-objektets output af denne kodeblok vil ligne den forrige kodeblok, men vil have forskellige egenskabsværdier.

For at vise de datoer, der er genereret som Day.js-objekter, skal du bruge format() metode. Det format() metoden i Day.js-biblioteket giver dig mulighed for at formatere et Day.js-objekt som en streng i henhold til en bestemt formatstreng.

Metoden tager en formatstreng som argument. Strengargumentet kan omfatte en kombination af bogstaver og specialtegn, hver med en bestemt betydning,

For eksempel:

importere Reagere fra'reagere';
importere dayjs fra'dayjs';
fungereApp() {


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


Vend tilbage (




{dato}</p>


{unixDate}</p>


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


eksportStandard App

Det dato variabel vil vise datoen i dette format 'onsdag den 26. april 2023'. Formatstrengen er 'dddd, MMMM D, ÅÅÅÅ' hvor ddd er ugedagen, MMMM er måneden i ord, D er dagen i måneden med et eller to cifre, og ÅÅÅÅ er året med fire cifre.

Det unixDato variabel er formateret som en streng ved hjælp af formatstrengen 'MM/DD/ÅÅÅÅ,' som repræsenterer måneden med to cifre, månedsdagen med to cifre og året med fire cifre.

Det tid variabel viser det aktuelle tidspunkt i det angivne format. Formatstrengen er 'HH: mm: ss' hvor er HH repræsenterer timerne, den mm repræsenterer referatet, og ss repræsenterer sekunderne.

Manipulering af datoer og tidspunkter

Day.js tilbyder flere metoder, der gør det nemt at manipulere datoer og tidspunkter. Du kan henvise til Day.js officiel dokumentation for at få den komplette liste over tilgængelige metoder til at manipulere datoer og tidspunkter.

For eksempel:

importere Reagere fra'reagere';
importere dayjs fra'dayjs';
fungereApp() {


konst dato = dayjs().add(7,'dage').format('dddd, MMMM D, ÅÅÅÅ'); // Onsdag den 16. juni 2023 
konst tid = dayjs().subtract(2, 'timer').format('HH: mm: ss'); // 07:53:00


Vend tilbage (




{dato}</p>


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


eksportStandard App

Kodeblokken ovenfor bruger tilføje() metode til at tilføje 7 dage til den aktuelle dato. Det tilføje() metode giver dig mulighed for at tilføje en bestemt mængde tid til et Day.js-objekt. Metoden tager to argumenter, mængden af ​​tid at tilføje i tal og tidsenheden at tilføje.

Med trække fra() metode, kan du trække en bestemt mængde tid fra Day.js objekt. Det tid variabel trækker 2 timer fra det aktuelle tidspunkt ved hjælp af trække fra() metode.

Viser relativ tid

Day.js tilbyder flere metoder, herunder fra nu(), tilNu(), til(), og fra() for at vise relativ tid, såsom "2 timer siden" eller "om 3 dage". For at bruge disse metoder skal du importere relativ tid plugin fra dayjs/plugin/relativeTime i din React-applikation.

For eksempel:

importere Reagere fra'reagere';
importere dayjs fra'dayjs';
importere relativ tid fra'dayjs/plugin/relativeTime';
fungereApp() {


 dayjs.extend (relativeTime);

konst dato = dayjs().add(7, 'dage')
konst relativDato = dato.fraNu(); // om 7 dage


konst dato2 = dayjs().subtract(2, 'timer');
konst relativDato2 = dato2.tilNu(); // om 2 timer


konst sidste år = dayjs().subtract(1, 'år');
konst diff = dato.fra (sidste år); // om et år
konst diff2 = dato.til (sidste år) // for et år siden


Vend tilbage (




{ relativ dato }</p>


{ relativ dato2 }</p>


{forskel }</p>


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


eksportStandard App

Det fra nu() funktionen viser en relativ tidsstreng, der repræsenterer forskellen mellem det aktuelle klokkeslæt og en specificeret dato. I dette eksempel er fra nu() viser forskellen mellem dato og det aktuelle tidspunkt.

Det tilNu() funktion ligner fra nu() funktion ved, at den viser en streng, der repræsenterer forskellen mellem en specificeret dato og det aktuelle klokkeslæt. Når du ringer til tilNu() funktion, returnerer den en relativ tidsstreng til det aktuelle tidspunkt.

Til sidst ved hjælp af fra() og til() funktioner, kan du vise en relativ tidsstreng, der repræsenterer forskellen mellem to angivne datoer. I dette eksempel får du forskellen mellem sidste år og dato bruger fra() og til() funktioner.

Bemærk, du kan også sende et valgfrit boolesk argument til fra nu(), tilNu(), fra(), og til() metoder til at angive, om suffikset skal inkluderes eller ekskluderes (f.eks. "siden" eller "i").

For eksempel:

konst dato = dayjs().add(7, 'dage')
konst relativDato = dato.fraNu(rigtigt); // 7 dage
konst dato2 = dayjs().subtract(2, 'timer');
konst relativDato2 = dato2.tilNu(rigtigt); // 2 timer
konst sidste år = dayjs().subtract(1, 'år');
konst diff = dato.fra (sidste år, rigtigt) // et år
konst diff2 = dato.til (sidste år, rigtigt) // et år

Bestået falsk til argumentet vil vise datoerne med suffikset.

Effektiv håndtering af dato og klokkeslæt

Administration af dato og klokkeslæt er et afgørende aspekt af enhver applikation, og Day.js giver et brugervenligt og fleksibelt bibliotek til håndtering af disse operationer i en React-applikation. Ved at inkorporere Day.js i dit projekt kan du nemt formatere datoer og klokkeslæt, analysere strenge og manipulere varigheder.

Derudover tilbyder Day.js en række plugins for at udvide dens funktionalitet og gøre den endnu mere kraftfuld. Uanset om du bygger en simpel kalender eller et komplekst planlægningssystem, er Day.js et glimrende valg til at administrere dato og klokkeslæt i din React-applikation.