Moment.js est une bibliothèque fantastique pour gérer efficacement la gestion de la date et de l'heure dans les applications React.

La gestion des dates et de l'heure dans React peut poser un défi pour ceux qui ne connaissent pas bien la région. 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 avec un moyen simple de manipuler et de formater les dates et les heures en JavaScript.

Installation de la bibliothèque Moment.js

Moment.js la bibliothèque est un package de gestion des 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 exécutant la commande suivante dans votre terminal :

moment d'installation de npm

Une fois l'installation terminée, vous pouvez utiliser Moment.js dans votre composant React.

Utilisation de Moment.js pour afficher la date et l'heure

instagram viewer

Vous pouvez utiliser Moment.js pour afficher les dates et les heures dans un format spécifique dans votre application React. Pour utiliser la bibliothèque, importez moment à partir du package installé.

importer Réagir depuis'réagir';
importer moment depuis'moment';
fonctionApplication() {


constante date = moment().format("MMMM JJ AAAA");
constante temps = instant().format("HH mm ss");


retour (




 Aujourd'huila date de est le { date } 


 Le temps est { temps } </p>
 </div>
 )
}


exporterdéfaut Application

Le moment() La méthode crée un nouvel objet moment qui représente un point spécifique dans le temps. Le format() formate un objet moment dans une représentation sous forme de chaîne.

Le format() La méthode prend un argument de chaîne spécifiant le format souhaité pour l'objet moment. L'argument de 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 :

  • AAAA: Année à quatre chiffres
  • AA: Année à deux chiffres
  • MM: Mois à deux chiffres
  • M: Mois à un ou deux chiffres
  • MMMM: Mois en lettres
  • JJ: Jour du mois à deux chiffres
  • D: Jour du mois à un ou deux chiffres
  • Faire: Jour du mois avec l'ordinal
  • HH: Heure à deux chiffres
  • H: Heure à un ou deux chiffres
  • millimètre: Minute à deux chiffres
  • m: Minute à un ou deux chiffres
  • ss: Seconde à deux chiffres
  • s: Seconde à un ou deux chiffres

Quand le Application composant dans le bloc de code précédent est rendu, la date et l'heure actuelles sont affichées dans le format spécifié à l'écran.

Le moment() La méthode peut prendre un argument de date ou d'heure de chaîne. Quand le moment() a un argument de date ou d'heure de chaîne, elle crée un objet moment représentant cette date ou cette heure. La chaîne peut être dans différents formats, tels que ISO 8601, RFC 2822 ou horodatage Unix.

Par exemple:

constante date = instant('1998-06-23').format("MMMM JJ AAAA");

Utilisation de 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 vous permettent d'ajouter ou de soustraire des intervalles de temps, de définir des valeurs spécifiques pour les composants de date et d'heure et d'effectuer d'autres opérations applicables.

Par exemple:

importer Réagir depuis'réagir';
importer moment depuis'moment';
fonctionApplication() {


constante demain = moment().add(1, 'jour').format("Fais MMMM, AAAA");
constante temps = moment(). soustraire(1, 'heure').format(« HH: mm: ss »);
constante dernièreAnnée = moment().set('année', 2022).ensemble('mois', 1).format("Fais MMMM, AAAA");
constante heure = moment().get('heure');


retour (


"Application">
Demainla date de est { demain }


C'était l'heure: { heure }, il y a une heure</p>


{ dernièreAnnée }</p>


{ heure }</p>
 </div>
 )
}


exporterdéfaut Application

Dans cet exemple, vous déclarer les variables JavaScript suivantes: demain, temps, l'année dernière, et heure. Ces quatre variables utilisent diverses méthodes de la bibliothèque Moment.js pour manipuler la date et l'heure.

Le demain variable utilise la ajouter() méthode pour ajouter un jour à la date actuelle. Le ajouter() La méthode ajoute du temps à un objet Moment donné. La fonction prend deux arguments: une valeur de durée et une chaîne représentant l'unité de temps à ajouter. L'unité pourrait être années, mois, semaines, jours, heures, minutes, et secondes.

Vous pouvez également soustraire du temps à l'aide de la soustraire() méthode. Dans ce cas, le temps variable utilise la soustraire() méthode pour soustraire une heure à l'heure actuelle.

En utilisant le ensemble() méthode, la l'année dernière fixe l'année à 2022 et le mois à février (puisque janvier est représenté par le mois 0). Le ensemble() La méthode attribue une unité de temps particulière à un objet Moment.

Avec le obtenir() méthode, vous pouvez récupérer une heure spécifique. Le obtenir() prend un seul argument, une unité de temps.

Utilisation de 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. Cela peut être utile lorsque vous travaillez avec des données provenant de sources externes.

Pour analyser une date ou une heure à partir d'une chaîne, vous devez utiliser le moment() méthode. Dans ce cas, le moment() La méthode prend deux arguments, la chaîne de date et une chaîne de format.

Voici un exemple de la façon dont vous pouvez utiliser le moment() méthode pour analyser les dates et les heures :

importer Réagir depuis'réagir';
importer moment depuis'moment';
fonctionApplication() {


constante date = instant('2920130000', 'Fais-MMMM-AAAA').à ce jour();
console.log( date );


retour (


</div>
 )
}
exporterdéfaut Application

Dans le bloc de code ci-dessus, moment() La méthode analysera cette chaîne '2920130000' en utilisant la chaîne de format "Do-MMMM-YYYY". Le à ce jour() convertit l'objet moment en un objet Date JavaScript natif.

Le à ce jour() La méthode ne prend aucun argument et renvoie un objet Date JavaScript représentant la même date et heure que l'objet moment.

Affichage du temps relatif

Avec la bibliothèque Moment.js, vous pouvez formater et afficher l'heure relative. Pour ce faire, vous utilisez le à partir de maintenant() et jusqu'à maintenant() méthodes. Ces méthodes affichent le temps entre une date donnée et l'heure actuelle.

Par exemple:

importer Réagir depuis'réagir';
importer moment depuis'moment';
fonctionApplication() {


constante hier = moment().subtract(7, 'jour');
constante time1 = hier.fromNow(); // il y a 7 jours
constante time2 = hier.toNow(); // dans 7 jours


retour (




{ temps1 }</p>


{ temps2 }</p>
 </div>
 )
}


exporterdéfaut Application

Dans cet exemple, le à partir de maintenant() renvoie le temps relatif écoulé depuis la date spécifiée, tandis que la jusqu'à maintenant() La méthode renvoie le temps relatif jusqu'à l'heure actuelle.

En savoir plus sur Moment.js

Moment.js est une bibliothèque puissante qui fournit un moyen simple de manipuler et de formater les dates et les heures en JavaScript. Vous avez appris à manipuler, afficher et analyser les dates et les 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.