La libreria Day.js semplifica la gestione delle operazioni di data e ora nelle applicazioni React.
La gestione di data e ora è fondamentale per qualsiasi applicazione e React non fa eccezione. Sebbene JavaScript fornisca funzioni di manipolazione di data e ora integrate, possono essere ingombranti. Fortunatamente, molte librerie di terze parti possono semplificare la gestione di data e ora in React. Una di queste librerie è Day.js.
Day.js è una libreria leggera per l'analisi, la convalida, la manipolazione e la formattazione di date e orari in JavaScript.
Installazione di Day.js
IL Giorno.js library è un'alternativa moderna a Moment.js, che è un'altra libreria utilizzata per gestire date e orari. Day.js offre un'API simile con un footprint ridotto e prestazioni più veloci.
Per utilizzare Day.js nella tua applicazione React, devi prima installarlo. Puoi farlo eseguendo il seguente comando nel tuo terminale:
npm installa dayjs
Analisi e formattazione di date e orari
Day.js fornisce una semplice API
per l'analisi e la formattazione delle date. È possibile ottenere la data e l'ora utilizzando il giornojs() metodo, ma prima devi importarlo dalla libreria Day.js.Per esempio:
importare Reagire da'reagire';
importare dayjs da'giorni';funzioneApp() {
cost data = giornojs();
consolare.log (data);ritorno (
Data e gestione del tempo</p>
</div>
)
}
esportarepredefinito App
IL giornojs() Il metodo crea un nuovo oggetto Day.js che rappresenta una data e un'ora specifiche. Nell'esempio sopra, il giornojs() Il metodo crea un oggetto Day.js che rappresenta la data e l'ora correnti.
Nella tua console, l'oggetto Day.js sarebbe simile a questo:
IL giornojs() il metodo accetta un argomento data facoltativo che può essere una stringa, un numero (timestamp Unix), un oggetto Data JavaScripto un altro oggetto Day.js. Il metodo genererà un oggetto Day.js che rappresenta l'argomento data specificato.
Per esempio:
importare Reagire da'reagire';
importare dayjs da'giorni';funzioneApp() {
cost data = giornojs('2023-05-01');
consolare.log (data); // Oggetto Day.js che rappresenta la data specificatacost unixData = giornojs(1651382400000);
consolare.log (dataunix); // Oggetto Day.js che rappresenta la data specificataritorno (
Data e gestione del tempo</p>
</div>
)
}
esportarepredefinito App
L'output dell'oggetto Day.js di questo blocco di codice sarà simile al blocco di codice precedente ma avrà valori di proprietà diversi.
Per visualizzare le date generate come oggetti Day.js, è necessario utilizzare il formato() metodo. IL formato() Il metodo della libreria Day.js consente di formattare un oggetto Day.js come una stringa in base a una stringa di formato specifica.
Il metodo accetta una stringa di formato come argomento. L'argomento stringa può includere una combinazione di lettere e caratteri speciali, ciascuno con un significato specifico,
Per esempio:
importare Reagire da'reagire';
importare dayjs da'giorni';funzioneApp() {
cost data = giornojs('2023-05-01').formato('gggg, MMMM D, AAAA'); // Lunedì 1 maggio 2023
cost ora = giornojs().format('HH: mm: ss'); //09:50:23
cost unixData = giornojs(1651382400000).formato('MM/GG/AA'); // 05/01/22ritorno (
{data}</p>
{unixDate}</p>
{tempo}</p>
</div>
)
}
esportarepredefinito App
IL data variabile visualizzerà la data in questo formato "mercoledì 26 aprile 2023". La stringa di formato è 'gggg, MMMM D, AAAA' Dove dddd è il giorno della settimana, MMMM è il mese in parole, D è il giorno del mese in una o due cifre, e AAAA è l'anno in quattro cifre.
IL unixData la variabile è formattata come una stringa utilizzando la stringa di formato "GG/MM/AAAA", che rappresenta il mese in due cifre, il giorno del mese in due cifre e l'anno in quattro cifre.
IL tempo La variabile visualizza l'ora corrente nel formato specificato. La stringa di formato è 'HH: mm: ss' dove il HH rappresenta le ore, il mm rappresenta i minuti, e il ss rappresenta i secondi.
Manipolazione di date e orari
Day.js fornisce diversi metodi che semplificano la manipolazione di date e orari. Puoi fare riferimento al Giorno.js documentazione ufficiale per ottenere l'elenco completo dei metodi disponibili per la manipolazione di date e orari.
Per esempio:
importare Reagire da'reagire';
importare dayjs da'giorni';funzioneApp() {
cost data = giornojs().add(7,'giorni').formato('gggg, MMMM D, AAAA'); // mercoledì 16 giugno 2023
cost ora = giornojs().subtract(2, 'ore').formato('HH: mm: ss'); // 07:53:00ritorno (
{data}</p>
{tempo}</p>
</div>
)
}
esportarepredefinito App
Il blocco di codice sopra utilizza il file aggiungere() metodo per aggiungere 7 giorni alla data corrente. IL aggiungere() Il metodo consente di aggiungere un periodo di tempo specificato a un oggetto Day.js. Il metodo accetta due argomenti, la quantità di tempo per sommare i numeri e l'unità di tempo per sommare.
Con il sottrarre() metodo, è possibile sottrarre un periodo di tempo specificato dal Giorno.js oggetto. IL tempo variabile sottrae 2 ore dall'ora corrente utilizzando il sottrarre() metodo.
Visualizzazione del tempo relativo
Day.js fornisce diversi metodi tra cui da adesso(), ora(), A(), E da() per visualizzare l'ora relativa, ad esempio "2 ore fa" o "tra 3 giorni". Per utilizzare questi metodi, importa il file tempo relativo plugin da dayjs/plugin/relativeTime nella tua applicazione React.
Per esempio:
importare Reagire da'reagire';
importare dayjs da'giorni';
importare tempo relativo da'dayjs/plugin/relativeTime';funzioneApp() {
dayjs.extend (relativeTime);
cost data = giornojs().add(7, 'giorni')
cost relativeDate = date.fromNow(); // tra 7 giornicost data2 = giornojs().subtract(2, 'ore');
cost relativeDate2 = date2.toNow(); // in 2 orecost lastYear = giornojs().subtract(1, 'anno');
cost diff = date.from (lastYear); // in un anno
cost diff2 = date.to (lastYear) // un anno faritorno (
{ Data relativa }</p>
{ Datarelativa2 }</p>
{ diff }</p>
{ diff2 }</p>
</div>
)
}
esportarepredefinito App
IL da adesso() La funzione visualizza una stringa dell'ora relativa che rappresenta la differenza tra l'ora corrente e una data specificata. In questo esempio, il da adesso() mostra la differenza tra data e l'ora corrente.
IL ora() la funzione è simile a da adesso() funzione in quanto visualizza una stringa che rappresenta la differenza tra una data specificata e l'ora corrente. Quando chiami il ora() funzione, restituisce una stringa temporale relativa all'ora corrente.
Infine, utilizzando il da() E A() funzioni, è possibile visualizzare una stringa temporale relativa che rappresenta la differenza tra due date specificate. In questo esempio, ottieni la differenza tra l'anno scorso E data usando il da() E A() funzioni.
Nota, puoi anche passare un argomento booleano facoltativo al file da adesso(), ora(), da(), E A() metodi per specificare se includere o escludere il suffisso (ad esempio "ago" o "in").
Per esempio:
cost data = giornojs().add(7, 'giorni')
cost relativeDate = date.fromNow(VERO); // 7 giornicost data2 = giornojs().subtract(2, 'ore');
cost relativeDate2 = date2.toNow(VERO); // 2 ore
cost lastYear = giornojs().subtract(1, 'anno');
cost diff = date.from (lastYear, VERO) // un anno
cost diff2 = date.to (lastYear, VERO) // un anno
Di passaggio falso all'argomento visualizzerà le date con il suffisso.
Gestione efficace di data e ora
La gestione di data e ora è un aspetto cruciale di qualsiasi applicazione e Day.js fornisce una libreria flessibile e facile da usare per gestire queste operazioni in un'applicazione React. Incorporando Day.js nel tuo progetto, puoi facilmente formattare date e orari, analizzare stringhe e manipolare durate.
Inoltre, Day.js offre una gamma di plugin per estendere le sue funzionalità e renderlo ancora più potente. Che tu stia costruendo un semplice calendario o un complesso sistema di pianificazione, Day.js è una scelta eccellente per gestire data e ora nella tua applicazione React.
