Comment gérer la gestion de la date et de l'heure dans React à l'aide de Day.js

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 fastidieuses. 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 pour analyser, valider, manipuler et formater les dates et les heures en JavaScript.

Installation de Day.js

Le Jour.js la bibliothèque est une alternative moderne à Moment.js, qui est une autre bibliothèque utilisée pour gérer les dates et les heures. Day.js propose une API similaire avec une empreinte réduite 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 installer dayjs

Analyse et formatage des dates et heures

Day.js fournit une API simple pour l'analyse et le formatage des dates. Vous pouvez obtenir la date et l'heure en utilisant le jourjs(), mais vous devez d'abord l'importer depuis la bibliothèque Day.js.

Par exemple:

importer Réagir depuis'réagir';
importer jourjs depuis'dayjs';
fonctionApplication() {
constante date = jourjs();
console.log (date); 
retour (



Date et gestion du temps</p>
 </div>
 )
}
exporterdéfaut Application

Le jourjs() La méthode crée un nouvel objet Day.js représentant une date et une heure spécifiques. Dans l'exemple ci-dessus, le jourjs() La méthode crée un objet Day.js représentant la date et l'heure actuelles.

Dans votre console, l'objet Day.js ressemblerait à ceci :

Le jourjs() La méthode accepte un argument optionnel de date qui peut être une chaîne, un nombre (horodatage Unix), un objet Date JavaScript, ou un autre objet Day.js. La méthode générera un objet Day.js représentant l'argument de date spécifié.

Par exemple:

importer Réagir depuis'réagir';
importer jourjs depuis'dayjs';
fonctionApplication() {
constante date = jourjs('2023-05-01');
console.log (date); // Objet Day.js représentant la date spécifiée
constante unixDate = jourjs(1651382400000);
console.log (unixDate); // Objet Day.js représentant la date spécifiée
retour (



Date et gestion du temps</p>
 </div>
 )
}
exporterdéfaut Application

La sortie de l'objet Day.js de ce bloc de code sera similaire au bloc de code précédent mais aura des valeurs de propriété différentes.

Pour afficher les dates générées en tant qu'objets Day.js, vous devez utiliser le format() méthode. Le format() La méthode de la bibliothèque Day.js vous permet de formater un objet Day.js en tant que chaîne selon une chaîne de format spécifique.

La méthode prend une chaîne de format comme argument. L'argument de chaîne peut inclure une combinaison de lettres et de caractères spéciaux, chacun ayant une signification spécifique,

Par exemple:

importer Réagir depuis'réagir';
importer jourjs depuis'dayjs';
fonctionApplication() {
constante date = jourjs('2023-05-01').format('jjjj, MMMM J, AAAA'); // Lundi 1er mai 2023
constante heure = jourjs().format('HH: mm: ss'); //09:50:23
constante unixDate = jourjs(1651382400000).format('MM/JJ/AA'); // 05/01/22
retour (



{date}</p>

{unixDate}</p>

{heure}</p>
 </div>
 )
}
exporterdéfaut Application

Le date affichera la date dans ce format 'mercredi 26 avril 2023'. La chaîne de format est ‘jjjj, MMMM J, AAAA’ où dddd est le jour de la semaine, MMMM est le mois en mots, D est le jour du mois à un ou deux chiffres, et AAAA est l'année à quatre chiffres.

Le unixDate la variable est formatée comme une chaîne en utilisant 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 La variable 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 millimètre représente les minutes, et le ss représente les secondes.

Manipulation des dates et des heures

Day.js fournit plusieurs méthodes qui facilitent la manipulation des dates et des heures. Vous pouvez vous référer au Jour.js documentation officielle pour obtenir la liste complète des méthodes disponibles pour manipuler les dates et les heures.

Par exemple:

importer Réagir depuis'réagir';
importer jourjs depuis'dayjs';
fonctionApplication() {
constante date = jourjs().add(7,'jours').format('jjjj, MMMM J, AAAA'); // Mercredi 16 juin 2023 
constante heure = jourjs().subtract(2, 'heures').format('HH: mm: ss'); // 07:53:00
retour (



{date}</p>

{heure}</p>
 </div>
 )
}
exporterdéfaut Application

Le bloc de code ci-dessus utilise le ajouter() méthode pour ajouter 7 jours à la date actuelle. Le ajouter() La méthode vous permet d'ajouter une durée spécifiée à un objet Day.js. La méthode prend deux arguments, la durée d'addition des nombres et l'unité de temps d'addition.

Avec le soustraire() méthode, vous pouvez soustraire une durée spécifiée de la Jour.js objet. Le temps variable soustrait 2 heures de l'heure actuelle en utilisant la soustraire() méthode.

Affichage du temps relatif

Day.js fournit plusieurs méthodes, notamment à partir de maintenant(), jusqu'à maintenant(), pour(), et depuis() pour afficher l'heure relative, comme "il y a 2 heures" ou "dans 3 jours". Pour utiliser ces méthodes, importez le heurerelative plug-in de dayjs/plugin/heurerelative dans votre application React.

Par exemple:

importer Réagir depuis'réagir';
importer jourjs depuis'dayjs';
importer heurerelative depuis'jourjs/plugin/tempsrelatif';
fonctionApplication() {
 dayjs.extend (relativeTime);

constante date = jourjs().add(7, 'jours')
constante daterelative = date.fromNow(); // dans 7 jours
constante date2 = jourjs().subtract(2, 'heures');
constante relativeDate2 = date2.toNow(); // dans 2 heures
constante lastYear = jourjs().subtract(1, 'année');
constante diff = date.from (lastYear); // dans un an
constante diff2 = date.to (lastYear) // il y a un an
retour (



{ daterelative }</p>

{ daterelative2 }</p>

{diff }</p>

{ diff2 }</p>
 </div>
 )
}
exporterdéfaut Application

Le à partir de maintenant() La fonction affiche une chaîne d'heure relative représentant la différence entre l'heure actuelle et une date spécifiée. Dans cet exemple, le à partir de maintenant() affiche la différence entre date et l'heure actuelle.

Le jusqu'à maintenant() fonction est similaire à la à partir de maintenant() fonction en ce qu'elle affiche une chaîne représentant la différence entre une date spécifiée et l'heure actuelle. Lorsque vous appelez le jusqu'à maintenant() fonction, elle renvoie une chaîne d'heure relative à l'heure actuelle.

Enfin, en utilisant le depuis() et pour() fonctions, vous pouvez afficher une chaîne d'heure relative représentant la différence entre deux dates spécifiées. Dans cet exemple, vous obtenez la différence entre l'année dernière et date en utilisant le depuis() et pour() les fonctions.

Notez que vous pouvez également passer un argument booléen facultatif au à partir de maintenant(), jusqu'à maintenant(), depuis(), et pour() pour spécifier s'il faut inclure ou exclure le suffixe (par exemple "ago" ou "in").

Par exemple:

constante date = jourjs().add(7, 'jours')
constante daterelative = date.fromNow(vrai); // 7 jours
constante date2 = jourjs().subtract(2, 'heures');
constante daterelative2 = date2.toNow(vrai); // 2 heures
constante lastYear = jourjs().subtract(1, 'année');
constante diff = date.from (lastYear, vrai) // une année
constante diff2 = date.to (lastYear, vrai) // une année

Qui passe 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 flexible et facile à utiliser 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 et manipuler les durées.

De plus, Day.js propose une gamme de plugins pour étendre ses fonctionnalités et le rendre encore plus puissant. Que vous construisiez un calendrier simple 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.