La gestion des dates et de l’heure dans React peut représenter un défi pour ceux qui manquent de familiarité dans ce domaine. Heureusement, il existe plusieurs bibliothèques qui peuvent vous aider à gérer la date et l’heure dans React. L’une de ces bibliothèques est Moment.js.
Moment.js est une bibliothèque légère qui permet de manipuler et de formater les dates et les heures en JavaScript.
Installation de la bibliothèque Moment.js
La bibliothèque Moment.js est un package permettant de gérer les opérations de date et d’heure en JavaScript. L’installation de la bibliothèque Moment.js est la première étape de l’utilisation de Moment.js dans votre application React. Vous pouvez le faire en lançant la commande suivante dans votre terminal :
npm install moment
Une fois l’installation terminée, vous pouvez utiliser Moment.js dans votre composant React.
Utiliser Moment.js pour afficher la date et l’heure
Vous pouvez utiliser Moment.js pour afficher des dates et des heures dans un format spécifique au sein de votre application React. Pour utiliser la bibliothèque, importez moment du paquet installé.
import React from 'react';
import moment from 'moment';
function App() {
const date = moment().format("MMMM DD YYYY");
const time = moment().format("HH mm ss");
return (
<div>
<p> Today's date is { date } </p>
<p> The time is { time } </p>
</div>
)
}
export default App
Le moment() crée un nouvel objet moment qui représente un point précis dans le temps. La méthode format() formate un objet moment en une représentation sous forme de chaîne de caractères.
La méthode format() prend un argument de type chaîne de caractères spécifiant le format souhaité pour l’objet moment. L’argument chaîne peut inclure une combinaison de lettres et de caractères spéciaux, chacun ayant une signification spécifique.
Certains de ces caractères spéciaux sont :
- YYYY: Année à quatre chiffres
- YY: Année à deux chiffres
- MM: Mois à deux chiffres
- M: Mois avec un ou deux chiffres
- MMMM: Mois en lettres
- DD: Jour du mois avec deux chiffres
- D: Jour du mois avec un ou deux chiffres
- Faire: Jour du mois avec l’ordinal
- HH: Heure à deux chiffres
- H: Heure avec un ou deux chiffres
- mm: Minute à deux chiffres
- m: Minute à un ou deux chiffres
- ss: Deuxième avec deux chiffres
- s: Deuxième avec un ou deux chiffres
Lorsque le App La date et l’heure actuelles sont affichées à l’écran dans le format spécifié.
Le moment() peut prendre en argument une chaîne de date ou d’heure. Lorsque la méthode moment() Si la méthode moment() a pour argument une chaîne de date ou d’heure, elle crée un objet moment représentant cette date ou cette heure. La chaîne peut se présenter sous différents formats, tels que ISO 8601, RFC 2822 ou timestamp Unix.
Par exemple :
const date = moment('1998-06-23').format("MMMM DD YYYY");
Utiliser Moment.js pour manipuler la date et l’heure
La bibliothèque Moment.js fournit également plusieurs méthodes pour manipuler les dates et les heures. Ces méthodes permettent d’ajouter ou de soustraire des intervalles de temps, de définir des valeurs spécifiques pour les composants de la date et de l’heure, et d’effectuer d’autres opérations applicables.
Par exemple :
import React from 'react';
import moment from 'moment';
function App() {
const tomorrow = moment().add(1, 'day').format("Do MMMM,YYYY");
const time = moment().subtract(1, 'hour').format("HH:mm:ss");
const lastYear = moment().set('year', 2022).set('month', 1).format("Do MMMM,YYYY");
const hour = moment().get('hour');
return (
<div className="App">
<p>Tomorrow's date is { tomorrow }</p>
<p>This was the time: { time }, an hour ago</p>
<p>{ lastYear }</p>
<p>{ hour }</p>
</div>
)
}
export default App
Dans cet exemple, vous déclarez les variables JavaScript suivantes : demain, temps, dernière annéeet heure. Ces quatre variables utilisent diverses méthodes de la bibliothèque Moment.js pour manipuler la date et l’heure.
Le demain utilise la variable add() pour ajouter un jour à la date actuelle. La méthode add() ajoute du temps à un objet Moment donné. La fonction prend deux arguments : une valeur de durée et une chaîne de caractères représentant l’unité de temps à ajouter. L’unité peut être années, mois, semaines, jours, heures, minuteset secondes.
Vous pouvez également soustraire le temps à l’aide de la fonction subtract() . Dans ce cas, la méthode temps utilise la variable subtract() pour soustraire une heure à l’heure actuelle.
En utilisant la méthode set() la méthode dernière année fixe l’année à 2022 et le mois à février (puisque janvier est représenté par le mois 0). La variable set() attribue une unité de temps particulière à un objet Moment.
Avec la méthode get() vous permet d’obtenir une heure précise. La méthode get() prend un seul argument, une unité de temps.
Utiliser Moment.js pour analyser la date et l’heure
Une autre fonctionnalité utile de Moment.js est sa capacité à analyser les dates et les heures à partir de chaînes de caractères. Cela peut être utile lorsque l’on travaille avec des données provenant de sources externes.
Pour analyser une date ou une heure à partir d’une chaîne de caractères, vous devez utiliser la fonction moment() . Dans ce cas, la méthode moment() prend deux arguments, la chaîne de date et une chaîne de format.
Voici un exemple d’utilisation de la méthode moment() pour analyser les dates et les heures :
import React from 'react';
import moment from 'moment';
function App() {
const date = moment('2920130000', 'Do-MMMM-YYYY').toDate();
console.log( date );
return (
<div></div>
)
}
export default App
Dans le bloc de code ci-dessus, moment() analysera la chaîne de caractères « 2920130000 » en utilisant le format « Do-MMMM-YYYY ». La méthode toDate() convertit l’objet moment en un objet date JavaScript natif.
La méthode toDate() ne prend aucun argument et renvoie un objet JavaScript Date représentant la même date et la même heure que l’objet moment.
Affichage du temps relatif
La bibliothèque Moment.js permet de formater et d’afficher l’heure relative. Pour ce faire, vous utilisez la fonction fromNow() et toNow() . Ces méthodes affichent le temps écoulé entre une date donnée et l’heure actuelle.
Par exemple :
import React from 'react';
import moment from 'moment';
function App() {
const yesterday = moment().subtract(7, 'day');
const time1 = yesterday.fromNow(); // 7 days ago
const time2 = yesterday.toNow(); // in 7 days
return (
<div>
<p>{ time1 }</p>
<p>{ time2 }</p>
</div>
)
}
export default App
Dans cet exemple, le fromNow() renvoie le temps relatif écoulé depuis la date spécifiée, tandis que la méthode toNow() renvoie le temps relatif jusqu’à l’heure actuelle.
Plus de détails sur Moment.js
Moment.js est une bibliothèque puissante qui fournit un moyen simple de manipuler et de formater des dates et des heures en JavaScript. Vous avez appris à manipuler, afficher et analyser des dates et des heures dans React à l’aide de Moment.js.
Moment.js propose plusieurs autres méthodes, telles que local, startOf, endOf, etc. Cependant, avec les informations fournies, vous êtes plus que prêt à commencer à utiliser Moment.js dans votre application React.
