Utilisation de Moment.js pour les applications React

1. Qu’est-ce que Moment.js
2. Comment utiliser Moment.js avec React
3. Moment.js Exemple pratique
4. Forfait react-moment
5. Autres alternatives viables

Il est difficile de penser à une application Web moderne impliquant des dates et des heures. Les applications React ne font pas exception à la règle.

La gestion de la date et de l’heure est au cœur de la création d’applications dynamiques dans React. De ce fait, JavaScript inclut un objet Date, qui est utile pour des opérations simples impliquant la date et l’heure.

Cependant, travailler avec l’objet Date est plus facile à dire qu’à faire. L’API de date est insuffisante pour formater, internationaliser et, en général, manipuler les dates.

Pour cette raison, la communauté des développeurs JavaScript a créé de nombreuses bibliothèques de dates pour effectuer certaines des opérations les plus avancées. Ceux-ci nous permettent de travailler avec des dates beaucoup plus efficacement, sans perdre de temps et d’énergie.

Qu’est-ce que Moment.js

C’est l’une des bibliothèques les plus stables pour le formatage des dates en JavaScript. La bibliothèque Moment est principalement utilisée pour l’analyse et le formatage des valeurs de données, mais elle possède de nombreuses fonctionnalités qui peuvent être utiles pour créer des applications modernes.

Par exemple, Moment est également utile pour la validation des données. Cela fonctionne avec Node.js et JavaScript normal.

Il peut être utilisé pour les applications frontales ainsi que pour la programmation côté serveur. Il est également compatible avec de nombreuses bibliothèques JavaScript populaires, notamment React et TypeScript.

La bibliothèque fournit une API qui enveloppe l’objet Date natif en JavaScript. De cette façon, nous n’avons pas à interagir avec l’API Date d’origine ni à la modifier.

La bibliothèque Moment est facile à apprendre et, en prime, prend en charge de nombreuses langues. Ainsi, il peut résoudre facilement nos problèmes d’internationalisation.

En ce moment, la bibliothèque est en mode maintenance. C’est toujours stable et toutes les méthodes fonctionnent comme elles sont censées le faire.

Cependant, les créateurs ont décidé d’arrêter de publier de nouvelles versions. Si vous êtes habitué à Moment et que vous souhaitez l’utiliser pour votre application React, vous êtes libre de le faire.

Ceux qui s’inquiètent de l’avenir à long terme de leur application pourraient envisager d’autres bibliothèques de dates JavaScript.

Comment utiliser Moment.js avec React

Parce que Moment.js est une bibliothèque externe, nous devons l’installer dans notre dossier de projet. Et pendant que nous y sommes, nous pouvons également installer le package react-moment, dont nous parlerons plus tard.

Si notre application a besoin des fonctions de fuseau horaire, il est recommandé d’installer également moment-timezone :

npm install --save moment moment-timezone

Une fois que nous avons fini d’installer les packages, nous devons les importer. Localisez le fichier où nous avons l’intention de les utiliser et importez-les :

import moment from 'moment'
import Moment from 'react-moment'
import 'moment-timezone'

Nous capitalisons Moment car il s’agit d’un composant React créé spécifiquement pour la manipulation de date dans cette bibliothèque.

Moment.js Exemple pratique

Regardons un exemple d’utilisation de la bibliothèque Moment dans React.

let momentObject = moment()

Dans cet exemple, nous renvoyons un objet moment simple, représentant le temps d’exécution du code. La bibliothèque Moment comprend de nombreuses autres méthodes bien plus intéressantes.

Par exemple, la méthode .add() peut muter l’objet en ajoutant un temps spécifique. Regardons un exemple :

moment().add(10, 'days')

Comme nous pouvons le voir, le premier argument de la méthode .add() spécifie la quantité, et le deuxième argument est nécessaire pour spécifier la période de temps. Nous pouvons enchaîner plusieurs méthodes les unes aux autres, par exemple :

moment().add(10, 'days').add(1, 'months')

Ce code ajoutera un mois de plus à la date retournée par la fonction moment().

Forfait react-moment

react-moment est basé sur le package moment mais fournit les mêmes fonctionnalités dans un composant. Examinons un exemple dans lequel nous devons formater la chaîne en tant que date.

import React  from 'react';
import Moment from 'react-moment';

class App extends React.Component {
    render() {
        return (
            <Moment>{'1996-07-21T11:55-5500'}</Moment>
        );
    }
}
export default App

Alternativement, nous pouvons utiliser l’attribut date sur le composant Moment pour transmettre la chaîne. La date n’a même pas besoin d’être une chaîne - il peut s’agir d’un tableau, d’un objet ou de l’instance de l’objet date.

Le composant Moment fournit un moyen simple d’utiliser les fonctionnalités de base de la bibliothèque Moment dans les applications React. Le composant accepte de nombreux props, tels que : date. format, trim et bien d’autres.

Pour des informations détaillées, consultez la documentation officielle.

Autres alternatives viables

La bibliothèque Moment n’est pas la seule bibliothèque pour travailler avec des dates en JavaScript. Des paquets comme date-fns offrent une excellente alternative.

Il contient une documentation très informative et autant de fonctionnalités que la bibliothèque Moment. Chaque fonction de cette bibliothèque est documentée.

Leurs noms sont conviviaux pour faciliter la compréhension de l’objectif de la fonction.