Come gestire la gestione di data e ora in React utilizzando Moment.js

La gestione di date e orari in React può rappresentare una sfida per coloro che non hanno familiarità con l'area. Fortunatamente, ci sono diverse librerie che possono aiutarti con la gestione di data e ora in React. Una di queste librerie è Moment.js.

Moment.js è una libreria leggera con un modo semplice per manipolare e formattare date e orari in JavaScript.

Installazione della libreria Moment.js

Momento.js la biblioteca è un pacchetto per la gestione delle operazioni di data e ora in JavaScript. L'installazione della libreria Moment.js è il primo passo per utilizzare Moment.js nella tua applicazione React. Puoi farlo eseguendo il seguente comando nel tuo terminale:

momento di installazione di npm

Una volta completata l'installazione, puoi utilizzare Moment.js nel tuo componente React.

Utilizzo di Moment.js per visualizzare data e ora

Puoi utilizzare Moment.js per visualizzare date e orari in un formato specifico all'interno della tua app React. Per utilizzare la libreria, importa

momento dal pacchetto installato.

importare Reagire da'reagire';
importare momento da'momento';
funzioneApp() {
cost data = momento().format("MMMM GG AAAA");
cost tempo = momento().format("HH mm ss");
ritorno (



 Oggila data di è { data } 

 L'ora è { ora } </p>
 </div>
 )
}
esportarepredefinito App

IL momento() Il metodo crea un nuovo oggetto momento che rappresenta un punto specifico nel tempo. IL formato() Il metodo formatta un oggetto momento in una rappresentazione di stringa.

IL formato() Il metodo accetta un argomento stringa che specifica il formato desiderato per l'oggetto momento. L'argomento stringa può includere una combinazione di lettere e caratteri speciali, ciascuno con un significato specifico.

Alcuni di questi caratteri speciali sono:

• AAAA: Anno con quattro cifre
• AA: Anno con due cifre
• MM: Mese a due cifre
• M: Mese con una o due cifre
• MMMM: Mese in parole
• GG: Giorno del mese a due cifre
• D: Giorno del mese con una o due cifre
• Fare: Giorno del mese con l'ordinale
• HH: Ora con due cifre
• H: Ora con una o due cifre
• mm: Minuti a due cifre
• M: Minuti con una o due cifre
• ss: Secondo con due cifre
• S: Secondo con una o due cifre

Quando il App viene eseguito il rendering del componente nel blocco di codice precedente, la data e l'ora correnti vengono visualizzate sullo schermo nel formato specificato.

IL momento() Il metodo può accettare un argomento stringa di data o ora. Quando il momento() metodo ha un argomento stringa data o ora, crea un oggetto momento che rappresenta quella data o ora. La stringa può essere in vari formati, come ISO 8601, RFC 2822 o timestamp Unix.

Per esempio:

cost data = momento('1998-06-23').formato("MMMM GG AAAA");

Utilizzo di Moment.js per manipolare data e ora

La libreria Moment.js fornisce anche diversi metodi per manipolare date e orari. Questi metodi consentono di aggiungere o sottrarre intervalli di tempo, impostare valori specifici per i componenti di data e ora ed eseguire altre operazioni applicabili.

Per esempio:

importare Reagire da'reagire';
importare momento da'momento';
funzioneApp() {
cost domani = momento().add(1, 'giorno').formato("Fai MMMM, AAAA");
cost tempo = momento().subtract(1, 'ora').formato("HH: mm: ss");
cost ultimoanno = momento().set('anno', 2022).impostato('mese', 1).formato("Fai MMMM, AAAA");
cost ora = momento().get('ora');
ritorno (

"App">
Domanila data di è {domani}

Questa era l'ora: { time }, un'ora fa</p>

{ ultimo anno }</p>

{ ora }</p>
 </div>
 )
}
esportarepredefinito App

In questo esempio tu dichiarare le seguenti variabili JavaScript: Domani, tempo, l'anno scorso, E ora. Queste quattro variabili utilizzano vari metodi della libreria Moment.js per manipolare la data e l'ora.

IL Domani variabile utilizza il aggiungere() metodo per aggiungere un giorno alla data corrente. IL aggiungere() Il metodo aggiunge tempo a un dato oggetto Momento. La funzione accetta due argomenti: un valore di durata e una stringa che rappresenta l'unità di tempo da aggiungere. L'unità potrebbe essere anni, mesi, settimane, giorni, ore, minuti, E secondi.

Puoi anche sottrarre il tempo usando il sottrarre() metodo. In questo caso, il tempo variabile utilizza il sottrarre() metodo per sottrarre un'ora dall'ora corrente.

Usando il impostato() metodo, il l'anno scorso variabile imposta l'anno su 2022 e il mese su febbraio (poiché gennaio è rappresentato come mese 0). IL impostato() Il metodo assegna una particolare unità di tempo a un oggetto Momento.

Con il Ottenere() metodo, è possibile recuperare un orario specifico. IL Ottenere() Il metodo accetta un singolo argomento, un'unità di tempo.

Utilizzo di Moment.js per analizzare data e ora

Un'altra caratteristica utile di Moment.js è la sua capacità di analizzare date e orari dalle stringhe. Questo può essere utile quando si lavora con dati provenienti da fonti esterne.

Per analizzare una data o un'ora da una stringa, è necessario utilizzare il momento() metodo. In questo caso, il momento() Il metodo accetta due argomenti, la stringa della data e una stringa di formato.

Ecco un esempio di come è possibile utilizzare il momento() metodo per analizzare date e orari:

importare Reagire da'reagire';
importare momento da'momento';
funzioneApp() {
cost data = momento('2920130000', 'Do-MMMM-AAAA').ad oggi();
consolare.log( data );
ritorno (

</div>
 )
}
esportarepredefinito App

Nel blocco di codice sopra, momento() Il metodo analizzerà questa stringa "2920130000" utilizzando la stringa di formato "Do-MMMM-YYYY". IL ad oggi() Il metodo converte l'oggetto moment in un oggetto Date JavaScript nativo.

IL ad oggi() Il metodo non accetta argomenti e restituisce un oggetto JavaScript Date che rappresenta la stessa data e ora dell'oggetto moment.

Visualizzazione del tempo relativo

Con la libreria Moment.js, puoi formattare e visualizzare il tempo relativo. Per fare questo, usi il da adesso() E ora() metodi. Questi metodi visualizzano l'ora tra una data data e l'ora corrente.

Per esempio:

importare Reagire da'reagire';
importare momento da'momento';
funzioneApp() {
cost ieri = momento().subtract(7, 'giorno');
cost ora1 = ieri.daAdesso(); // 7 giorni fa
cost time2 = ieri.toAdesso(); // tra 7 giorni
ritorno (



{ ora1 }</p>

{ ora2 }</p>
 </div>
 )
}
esportarepredefinito App

In questo esempio, il da adesso() Il metodo restituisce il tempo relativo trascorso dalla data specificata, mentre il metodo ora() Il metodo restituisce l'ora relativa fino all'ora corrente.

Altro su Moment.js

Moment.js è una potente libreria che fornisce un modo semplice per manipolare e formattare date e orari in JavaScript. Hai imparato a manipolare, visualizzare e analizzare date e orari in React utilizzando Moment.js.

Moment.js offre molti altri metodi, come local, startOf, endOf e così via. Tuttavia, con le informazioni fornite, sei più che preparato per iniziare a utilizzare Moment.js nella tua applicazione React.