Comment gérer la date et l’heure dans React en utilisant 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 lourdes. 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

L’utilisation de Day.js 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 :

Analyse et formatage des dates et des 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 commande dayjs() mais vous devez d’abord l’importer de la bibliothèque Day.js.

Par exemple :

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

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

La méthode dayjs() accepte un argument de date facultatif 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 :

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.

Voir aussi :  10 idées de projets Python adaptées aux débutants

Pour afficher les dates générées en tant qu’objets Day.js, vous devez utiliser la propriété format() pour afficher les dates générées sous forme d’objets Day.js. La méthode format() de la bibliothèque Day.js vous 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 :

Le date affiche la date dans le format suivant : « mercredi 26 avril 2023 ». La chaîne de format est ‘dddd, MMMM D, YYYY’dddd est le jour de la semaine, MMMM est le mois en toutes 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 comme une 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 l’heure affiche l’heure actuelle dans le format spécifié. La chaîne de format est ‘HH:mm:ss’ où le format HH représente les heures, le mm représente les minutes, et la valeur 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 aux méthodes Day.js pour obtenir la liste complète des méthodes disponibles pour manipuler les dates et les heures.

Par exemple :

Le bloc de code ci-dessus utilise la méthode add() pour ajouter 7 jours à la date actuelle. La méthode add() vous 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.

Voir aussi :  Comment parcourir un dictionnaire en Python

Avec la méthode subtract() vous permet de soustraire une durée spécifiée de la valeur de la variable Day.js de l’objet. L’objet temps soustrait 2 heures à l’heure actuelle en utilisant la variable subtract() .

Affichage du temps relatif

Day.js propose plusieurs méthodes, notamment 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 à partir de dayjs/plugin/relativeTime dans votre application React.

Par exemple :

Les 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.

Les 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() elle renvoie une chaîne de temps relative à l’heure actuelle.

Enfin, en utilisant la fonction from() et à() 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ère année et date à l’aide de la date from() et à() sont des fonctions.

Notez que vous pouvez également passer un argument booléen facultatif à la fonction fromNow(), toNow(), from() et à() pour spécifier s’il faut inclure ou exclure le suffixe (par exemple « ago » ou « in »).

Par exemple :

Passage faux à l’argument affichera les dates avec le suffixe.

Gestion efficace de la date et de 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 intégrant Day.js à votre projet, vous pouvez facilement formater les dates et les heures, analyser les chaînes de caractères et manipuler les durées.

Voir aussi :  Comment déployer une API REST Express.js sur Render : Une alternative à Heroku

En outre, Day.js propose 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.

Comment obtenir la date et l’heure actuelles en utilisant dayjs ?

L’appel à dayjs() sans paramètres renvoie un nouvel objet Day.js avec la date et l’heure actuelles. C’est essentiellement la même chose que d’appeler dayjs(new Date()) .

Comment formater une date en utilisant dayjs ?

La fonction add est utilisée pour ajouter la date et l’heure à l’objet dayjs et la fonction subtract soustrait la date et l’heure de l’objet dayjs. import dayjs from ‘dayjs’ ; let now = dayjs() ; console. log(now. format(‘YYYY-MM-DD’)) ; let d1 = now.

Comment ajouter du temps dans Dayjs ?

Manipulation de la date et de l’heure Vous pouvez utiliser les fonctions d’addition et de soustraction dans Day.js pour manipuler les objets sous la forme d’opérations arithmétiques respectives. Par exemple, vous pouvez utiliser cette fonctionnalité pour ajouter ou soustraire des unités (heure, minute, seconde, etc.) à la date et à l’heure actuelles. let cur = dayjs() ;

Comment convertir une date en jour en JavaScript ?

JavaScript – Méthode getDay() La méthode getDay() de JavaScript renvoie le jour de la semaine pour la date spécifiée en fonction de l’heure locale. La valeur retournée par getDay() est un entier correspondant au jour de la semaine : 0 pour le dimanche, 1 pour le lundi, 2 pour le mardi, etc.

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *