La gestion de la date et de l’heure est cruciale pour toute application, et React ne fait pas exception. Bien que JavaScript fournisse des fonctions intégrées de manipulation de la date et de l’heure, elles peuvent être encombrantes. Heureusement, de nombreuses bibliothèques tierces peuvent simplifier la gestion de la date et de l’heure dans React. L’une de ces bibliothèques est Day.js.
Day.js est une bibliothèque légère qui permet d’analyser, de valider, de manipuler et de formater les dates et les heures en JavaScript.
Installation de Day.js
La bibliothèque Day.js est une alternative moderne à Moment.js, une autre bibliothèque utilisée pour gérer les dates et les heures. Day.js offre une API similaire avec une empreinte plus petite et des performances plus rapides.
Pour utiliser Day.js dans votre application React, vous devez d’abord l’installer. Vous pouvez le faire en exécutant la commande suivante dans votre terminal :
npm install dayjs
Analyse et formatage des dates et heures
Day.js fournit une API simple pour analyser et formater les dates. Vous pouvez obtenir la date et l’heure à l’aide de la fonction dayjs() mais d’abord, vous devez l’importer de la bibliothèque Day.js.
Par exemple :
import React from 'react';
import dayjs from 'dayjs';
function App() {
const date = dayjs();
console.log(date);
return (
<div>
<p>Date and Time Management</p>
</div>
)
}
export default App
Le dayjs() crée un nouvel objet Day.js représentant une date et une heure spécifiques. Dans l’exemple ci-dessus, l’objet dayjs() crée un objet Day.js représentant la date et l’heure actuelles.
Dans votre console, l’objet Day.js ressemblerait à ceci :
L’objet dayjs() La méthode dayjs() accepte un argument optionnel de date qui peut être une chaîne de caractères, un nombre (horodatage Unix), un objet JavaScript Date ou un autre objet Day.js. La méthode génère un objet Day.js représentant l’argument date spécifié.
Par exemple :
import React from 'react';
import dayjs from 'dayjs';
function App() {
const date = dayjs('2023-05-01');
console.log(date); // Day.js object representing the date specified
const unixDate = dayjs(1651382400000);
console.log(unixDate); // Day.js object representing the date specified
return (
<div>
<p>Date and Time Management</p>
</div>
)
}
export default App
La sortie de l’objet Day.js de ce bloc de code sera similaire au bloc de code précédent, mais les valeurs des propriétés seront différentes.
Pour afficher les dates générées en tant qu’objets Day.js, vous devez utiliser l’objet format() méthode. La méthode format() de la bibliothèque Day.js permet de formater un objet Day.js en tant que chaîne de caractères selon une chaîne de format spécifique.
La méthode prend une chaîne de format comme argument. L’argument de la chaîne peut inclure une combinaison de lettres et de caractères spéciaux, chacun ayant une signification spécifique,
Par exemple :
import React from 'react';
import dayjs from 'dayjs';
function App() {
const date = dayjs('2023-05-01').format('dddd, MMMM D, YYYY'); // Monday, May 1, 2023
const time = dayjs().format('HH:mm:ss'); //09:50:23
const unixDate = dayjs(1651382400000).format('MM/DD/YY'); // 05/01/22
return (
<div>
<p>{date}</p>
<p>{unixDate}</p>
<p>{time}</p>
</div>
)
}
export default App
Le date affichera la date dans le format suivant : « Mercredi 26 avril 2023 ». La chaîne de format est la suivante ‘dddd, MMMM D, YYYY’ où dddd est le jour de la semaine, MMMM est le mois en lettres, D est le jour du mois en un ou deux chiffres, et YYYY est l’année en quatre chiffres.
L’année unixDate est formatée sous forme de chaîne de caractères à l’aide de la chaîne de format ‘MM/JJ/AAAA,’ qui représente le mois en deux chiffres, le jour du mois en deux chiffres et l’année en quatre chiffres.
Le temps affiche l’heure actuelle dans le format spécifié. La chaîne de format est ‘HH:mm:ss’ où le HH représente les heures, le mm représente les minutes, et le ss représente les secondes.
Manipulation des dates et heures
Day.js propose plusieurs méthodes qui facilitent la manipulation des dates et des heures. Vous pouvez vous référer à la documentation officielle de Day.js pour obtenir la liste complète des méthodes disponibles pour manipuler les dates et les heures.
Par exemple :
import React from 'react';
import dayjs from 'dayjs';
function App() {
const date = dayjs().add(7,'days').format('dddd, MMMM D, YYYY'); // Wednesday, June 16, 2023
const time = dayjs().subtract(2, 'hours').format('HH:mm:ss'); // 07:53:00
return (
<div>
<p>{date}</p>
<p>{time}</p>
</div>
)
}
export default App
Le bloc de code ci-dessus utilise la fonction add() pour ajouter 7 jours à la date actuelle. La méthode add() permet d’ajouter une durée spécifiée à un objet Day.js. La méthode prend deux arguments, la quantité de temps à ajouter en chiffres et l’unité de temps à ajouter.
Avec la méthode subtract() vous permet de soustraire une durée spécifiée de la valeur de la méthode Day.js objet. L’objet temps soustrait 2 heures à l’heure actuelle à l’aide de la variable subtract() méthode.
Affichage du temps relatif
Day.js fournit plusieurs méthodes dont fromNow(), toNow(), to()et de() pour afficher le temps relatif, comme « il y a 2 heures » ou « dans 3 jours ». Pour utiliser ces méthodes, importez le fichier relativeTime plugin de dayjs/plugin/relativeTime dans votre application React.
Par exemple :
import React from 'react';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
function App() {
dayjs.extend(relativeTime);
const date = dayjs().add(7, 'days')
const relativeDate = date.fromNow(); // in 7 days
const date2 = dayjs().subtract(2, 'hours');
const relativeDate2 = date2.toNow(); // in 2 hours
const lastYear = dayjs().subtract(1, 'year');
const diff = date.from(lastYear); // in a year
const diff2 = date.to(lastYear) // a year ago
return (
<div>
<p>{ relativeDate }</p>
<p>{ relativeDate2 }</p>
<p>{ diff }</p>
<p>{ diff2 }</p>
</div>
)
}
export default App
Le fromNow() affiche une chaîne de temps relative représentant la différence entre l’heure actuelle et une date spécifiée. Dans cet exemple, la fonction fromNow() affiche la différence entre date et l’heure actuelle.
Le toNow() est similaire à la fonction fromNow() en ce sens qu’elle affiche une chaîne de caractères représentant la différence entre une date spécifiée et l’heure actuelle. Lorsque vous appelez la fonction toNow() renvoie une chaîne de temps relative à l’heure actuelle.
Enfin, en utilisant la fonction from() et to() vous pouvez afficher une chaîne de temps relative représentant la différence entre deux dates spécifiées. Dans cet exemple, vous obtenez la différence entre dernièreannée et date à l’aide de l’outil from() et to() fonctions.
Notez que vous pouvez également passer un argument booléen facultatif à la fonction fromNow(), toNow(), à partir de()et à() pour spécifier s’il faut inclure ou exclure le suffixe (par exemple, « ago » ou « in »).
Par exemple :
const date = dayjs().add(7, 'days')
const relativeDate = date.fromNow(true); // 7 days
const date2 = dayjs().subtract(2, 'hours');
const relativeDate2 = date2.toNow(true); // 2 hours
const lastYear = dayjs().subtract(1, 'year');
const diff = date.from(lastYear, true) // a year
const diff2 = date.to(lastYear, true) // a year
Passage faux à l’argument affichera les dates avec le suffixe.
Gérer efficacement la date et l’heure
La gestion de la date et de l’heure est un aspect crucial de toute application, et Day.js fournit une bibliothèque facile à utiliser et flexible pour gérer ces opérations dans une application React. En incorporant Day.js dans votre projet, vous pouvez facilement formater les dates et les heures, analyser les chaînes de caractères et manipuler les durées.
En outre, Day.js offre une gamme de plugins pour étendre ses fonctionnalités et le rendre encore plus puissant. Que vous construisiez un simple calendrier ou un système de planification complexe, Day.js est un excellent choix pour gérer la date et l’heure dans votre application React.