Day.js-biblioteket gjør det enkelt å håndtere dato- og klokkeslettoperasjoner i React-applikasjoner.

Dato- og tidsstyring er avgjørende for enhver applikasjon, og React er intet unntak. Mens JavaScript har innebygde funksjoner for dato- og klokkeslettmanipulering, kan de være tungvinte. Heldigvis kan mange tredjepartsbiblioteker forenkle dato- og tidsstyring i React. Et slikt bibliotek er Day.js.

Day.js er et lettvektsbibliotek for å analysere, validere, manipulere og formatere datoer og klokkeslett i JavaScript.

Installerer Day.js

De Day.js bibliotek er et moderne alternativ til Moment.js, som er et annet bibliotek som brukes til å håndtere datoer og klokkeslett. Day.js tilbyr en lignende API med et mindre fotavtrykk og raskere ytelse.

For å bruke Day.js i React-applikasjonen din, må du først installere den. Du kan gjøre dette ved å kjøre følgende kommando i terminalen din:

npm installer dayjs

Parsing og formatering av datoer og klokkeslett

Day.js gir et enkelt API for å analysere og formatere datoer. Du kan få dato og klokkeslett ved å bruke

instagram viewer
dayjs() metoden, men først må du importere den fra Day.js-biblioteket.

For eksempel:

import Reagere fra'reagere';
import dayjs fra'dayjs';
funksjonApp() {


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


komme tilbake (




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


eksportmisligholde App

De dayjs() metoden oppretter et nytt Day.js-objekt som representerer en bestemt dato og klokkeslett. I eksemplet ovenfor er dayjs() metoden oppretter et Day.js-objekt som representerer gjeldende dato og klokkeslett.

I konsollen din vil Day.js-objektet se slik ut:

De dayjs() metoden godtar et valgfritt datoargument som kan være en streng, et tall (Unix-tidsstempel), et JavaScript Date-objekt, eller et annet Day.js-objekt. Metoden vil generere et Day.js-objekt som representerer datoargumentet som er spesifisert.

For eksempel:

import Reagere fra'reagere';
import dayjs fra'dayjs';
funksjonApp() {


konst dato = dayjs('2023-05-01');
konsoll.log (dato); // Day.js-objekt som representerer den angitte datoen


konst unixDate = dayjs(1651382400000);
konsoll.log (unixDate); // Day.js-objekt som representerer den angitte datoen


komme tilbake (




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


eksportmisligholde App

Day.js-objektets utdata fra denne kodeblokken vil være lik den forrige kodeblokken, men vil ha forskjellige egenskapsverdier.

For å vise datoene generert som Day.js-objekter, må du bruke format() metode. De format() metoden til Day.js-biblioteket lar deg formatere et Day.js-objekt som en streng i henhold til en bestemt formatstreng.

Metoden tar en formatstreng som argument. Strengargumentet kan inneholde en kombinasjon av bokstaver og spesialtegn, hver med en bestemt betydning,

For eksempel:

import Reagere fra'reagere';
import dayjs fra'dayjs';
funksjonApp() {


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


komme tilbake (




{date}</p>


{unixDate}</p>


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


eksportmisligholde App

De Dato variabelen vil vise datoen i dette formatet "onsdag 26. april 2023". Formatstrengen er 'dddd, MMMM D, ÅÅÅÅ' hvor dddd er ukedagen, MMMM er måneden i ord, D er dagen i måneden med ett eller to sifre, og ÅÅÅÅ er året med fire sifre.

De unixDate variabelen er formatert som en streng ved hjelp av formatstrengen 'MM/DD/ÅÅÅÅ,' som representerer måneden med to sifre, månedsdagen med to sifre og året med fire sifre.

De tid variabel viser gjeldende tid i det angitte formatet. Formatstrengen er 'HH: mm: ss' hvor i HH representerer timene, den mm representerer referatet, og ss representerer sekundene.

Manipulere datoer og klokkeslett

Day.js tilbyr flere metoder som gjør det enkelt å manipulere datoer og klokkeslett. Du kan referere til Day.js offisiell dokumentasjon for å få den komplette listen over tilgjengelige metoder for å manipulere datoer og klokkeslett.

For eksempel:

import Reagere fra'reagere';
import dayjs fra'dayjs';
funksjonApp() {


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


komme tilbake (




{date}</p>


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


eksportmisligholde App

Kodeblokken ovenfor bruker Legg til() metode for å legge til 7 dager til gjeldende dato. De Legg til() metode lar deg legge til en spesifisert mengde tid til et Day.js-objekt. Metoden tar to argumenter, hvor lang tid det tar å legge til i tall og tidsenheten å legge til.

Med trekke fra() metoden, kan du trekke fra en spesifisert tid fra Day.js gjenstand. De tid variabel trekker 2 timer fra gjeldende tid ved å bruke trekke fra() metode.

Viser relativ tid

Day.js tilbyr flere metoder, inkludert fra nå(), til nå(), til(), og fra() for å vise relativ tid, for eksempel "2 timer siden" eller "om 3 dager". For å bruke disse metodene, importer relativ tid plugin fra dayjs/plugin/relativeTime i din React-applikasjon.

For eksempel:

import Reagere fra'reagere';
import dayjs fra'dayjs';
import relativ tid fra'dayjs/plugin/relativeTime';
funksjonApp() {


 dayjs.extend (relativeTime);

konst dato = dayjs().add(7, 'dager')
konst relativDato = dato.fraNå(); // om 7 dager


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


konst lastYear = dayjs().subtract(1, 'år');
konst diff = date.from (lastYear); // på et år
konst diff2 = date.to (lastYear) // et år siden


komme tilbake (




{ relativ dato }</p>


{ relativ dato2 }</p>


{ diff }</p>


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


eksportmisligholde App

De fra nå() funksjonen viser en relativ tidsstreng som representerer forskjellen mellom gjeldende klokkeslett og en spesifisert dato. I dette eksemplet er fra nå() viser forskjellen mellom Dato og gjeldende tid.

De til nå() funksjonen ligner på fra nå() funksjon ved at den viser en streng som representerer forskjellen mellom en spesifisert dato og gjeldende klokkeslett. Når du ringer til nå() funksjon, returnerer den en relativ tidsstreng til gjeldende tid.

Til slutt bruker du fra() og til() funksjoner, kan du vise en relativ tidsstreng som representerer forskjellen mellom to spesifiserte datoer. I dette eksemplet får du forskjellen mellom i fjor og Dato bruker fra() og til() funksjoner.

Merk at du også kan sende inn et valgfritt boolsk argument til fra nå(), til nå(), fra(), og til() metoder for å spesifisere om suffikset skal inkluderes eller ekskluderes (f.eks. "ago" eller "in").

For eksempel:

konst dato = dayjs().add(7, 'dager')
konst relativDato = dato.fraNå(ekte); // 7 dager
konst dato2 = dayjs().subtract(2, 'timer');
konst relativDato2 = dato2.tilNå(ekte); // 2 timer
konst lastYear = dayjs().subtract(1, 'år');
konst diff = date.from (lastYear, ekte) // et år
konst diff2 = date.to (lastYear, ekte) // et år

Passering falsk til argumentet vil vise datoene med suffikset.

Administrer dato og klokkeslett effektivt

Å administrere dato og klokkeslett er et avgjørende aspekt ved enhver applikasjon, og Day.js gir et brukervennlig og fleksibelt bibliotek for å håndtere disse operasjonene i en React-applikasjon. Ved å inkludere Day.js i prosjektet ditt kan du enkelt formatere datoer og klokkeslett, analysere strenger og manipulere varigheter.

I tillegg tilbyr Day.js en rekke plugins for å utvide funksjonaliteten og gjøre den enda kraftigere. Enten du bygger en enkel kalender eller et komplekst planleggingssystem, er Day.js et utmerket valg for å administrere dato og klokkeslett i React-applikasjonen din.