Moment.js : explication complète et exemples pratiques de la bibliothèque de dates

Informatec Digital » Expressions idiomatiques » Moment.js : explication complète et exemples pratiques de la bibliothèque de dates

Gérer les dates et les heures en JavaScript peut s'avérer complexe pour les développeurs web . Heureusement, des outils comme Moment.js simplifient considérablement ce processus, facilitant grandement toutes les opérations, de la mise en forme basique des dates aux manipulations et validations complexes. Si vous avez déjà éprouvé de la frustration en essayant de convertir, comparer ou afficher correctement des dates dans vos projets, Moment.js vous a probablement été d'une grande aide, ou du moins, vous devriez envisager de l'utiliser.

Dans cet article, je vous dévoilerai tout ce qu'il faut savoir sur Moment.js : ses fonctions principales, ses astuces moins connues, des exemples pratiques et son intégration avec d'autres bibliothèques, ainsi qu'une explication claire de sa syntaxe et des tâches que vous pouvez accomplir avec. Nous aborderons également ses limitations, ses mises à jour récentes et les alternatives disponibles si vous recherchez une solution plus moderne.

Qu'est-ce que Moment.js et pourquoi est-il devenu si populaire ?

Moment.js est une bibliothèque JavaScript conçue pour simplifier la manipulation des dates et des heures . Elle permet de créer, analyser, manipuler et afficher des dates dans pratiquement tous les formats imaginables grâce à une syntaxe à la fois simple et puissante. Depuis des années, cette bibliothèque est la solution privilégiée de la communauté pour pallier les limitations de l'objet Date() natif de JavaScript.

Le cœur de Moment.js s'articule autour de l' objet `moment()` , capable de construire des dates à partir de presque n'importe quelle entrée valide : chaînes de caractères, objets Date, horodatages ou directement avec des arguments numériques. Cette caractéristique le rend extrêmement flexible et utile dans tous types de projets, des petits scripts aux applications d'entreprise gérant des fuseaux horaires internationaux ou des archives.

Qu’est-ce qui explique son succès ? Sa fiabilité, sa simplicité d’utilisation et la variété des outils et plugins associés . Même en mode maintenance, Moment.js conserve une large base d’utilisateurs et une documentation complète , confortant ainsi sa position de solution de gestion des données de référence en JavaScript et Node.js.

Principales fonctionnalités et avantages de Moment.js

• API simple et intuitiveL'un des principaux atouts de Moment.js réside dans sa syntaxe claire. Vous pouvez effectuer des opérations simples, comme obtenir la date du jour ou convertir une chaîne dans un format spécifique, ou des calculs et validations complexes en quelques lignes seulement.
• Analyse et formatage flexiblesL'analyse des chaînes de dates de presque tous les formats et leur conversion vers la sortie souhaitée n'a jamais été aussi simple. Moment.js permet de formater rapidement et sans difficulté les dates dans les présentations personnalisées..
• Manipulation des dates:Ajouter ou soustraire des jours, des mois, des années, des semaines ou toute autre unité de temps est aussi simple que d'utiliser les méthodes ajouter() y soustraire()Ceci est très utile lorsque vous devez travailler avec des dates relatives, des dates d’échéance ou des délais qui varient de manière dynamique.
• Validation robuste: Si vous avez besoin de vérifier la validité ou l'existence d'une date (par exemple, le 30 février), Moment.js vous facilite la tâche. La méthode estValide() Il est capable de détecter des erreurs subtiles dans le format ou la logique des dates.
• Prise en charge des fuseaux horaires et de la localisation:Merci à votre plugin moment-fuseau horaireConvertir des dates entre différents fuseaux horaires est très simple. Vous pouvez également afficher des dates adaptées à la langue et aux conventions régionales de l'utilisateur, ce qui est essentiel pour les applications internationales.
• Écosystème de plugins:En plus de la bibliothèque principale, il existe un écosystème de plugins pour étendre ses fonctionnalités (calendrier, compatibilité avec d'autres frameworks, formats exotiques...).

Comment démarrer avec Moment.js dans votre projet

L'installation est très simple . Vous pouvez inclure Moment.js dans votre code HTML avec une seule ligne :

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Si vous travaillez avec Node.js ou un environnement de développement moderne, il est courant de l'installer à l'aide de npm ou de yarn :

npm install moment

Une fois cela fait, vous pouvez importer Moment.js selon la syntaxe que vous utilisez :

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

Créer des dates : différentes manières et exemples pratiques

Créez des dates facilement

Pour obtenir la date et l'heure actuelles, utilisez simplement moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

Vous pouvez construire une date spécifique en passant des arguments :

moment("2022-10-14"); // Crea el 14 de octubre de 2022

Vous pouvez également partir d'une chaîne et d'un format donnés, même en mode strict :

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

Avez-vous un objet Date natif ?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

Formatage et affichage des dates

Moment.js vous permet d'afficher les dates dans tous les formats imaginables . Par exemple, pour afficher la date actuelle au format jour/mois/année :

moment().format('DD/MM/YYYY');

Si vous souhaitez une chaîne plus humanisée, vous pouvez utiliser :

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

Quelques jetons utiles pour la mise en forme :

• YYYY: année à 4 chiffres
• MM: mois
• DD: jour du mois
• hh o HH: heure (format 12h ou 24h)
• mm: minutes
• ss: secondes
• a: am/pm

Par exemple, pour afficher uniquement l'heure :

moment().format('HH:mm:ss');

Formatage avancé avec jetons et support régional

Moment.js prend en charge plusieurs formats localisés et traductions . Il est possible de changer de langue à la volée pour afficher les noms des mois et des jours dans une autre langue.

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

Manipulation de dates : addition, soustraction et comparaison

Travailler avec des dates relatives est l'un des points forts de Moment.js.

• Ajouter des jours, des mois ou des années:

  moment().add(3, 'days').format('DD/MM/YYYY');

• Soustraire des unités:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• Début et fin des règles:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

Valider les dates et détecter les erreurs

Avant d’opérer avec des dates, il est essentiel de vérifier qu’elles sont correctes :

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

Cela permet d'éviter les bugs inattendus dans les applications qui reçoivent des dates de l'utilisateur.

Comparaison de dates : vérifier si une date est parmi d'autres

Moment.js inclut plusieurs méthodes pour comparer les dates :

• estAvant(): Vérifie si une date est antérieure à une autre.
• estAprès(): Vérifie si une date est ultérieure.
• estEntre(): Indique si une date est comprise entre deux dates données.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

Gestion des fuseaux horaires et des dates internationales

Lorsque vous travaillez avec des utilisateurs situés dans différentes parties du monde, les fuseaux horaires peuvent s'avérer très problématiques . Grâce à l' extension moment-timezone , vous pouvez facilement convertir les dates entre les régions.

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

De plus, Moment.js est capable d'afficher des dates adaptées aux paramètres régionaux de l'utilisateur , en affichant les noms des mois et des jours correctement traduits.

Exemples d'utilisation clés et conseils avancés

Obtenir les différences entre les dates

Vous pouvez calculer le temps écoulé entre deux dates dans des unités différentes :

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

Dates relatives et temps humains

Moment.js est idéal pour afficher des messages tels que « il y a 3 jours » ou « dans 5 heures » :

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

Calendrier humain

La fonction calendar() affiche des dates relatives telles que « hier à 17h00 », « demain à 9h00 », ce qui la rend très utile pour les applications de calendrier.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

Prise en charge des sauts d'année et des jours spéciaux

Voulez-vous savoir si une année est bissextile ?

moment([2024]).isLeapYear(); // true

La méthode isLeapYear() vous donne directement la réponse.

Personnalisation avancée : formats, jetons et analyse stricte

Moment.js vous permet d'utiliser des chaînes de caractères et des jetons personnalisés pour créer ou lire des dates dans d'innombrables formats . De plus, le mode strict exige des correspondances exactes, évitant ainsi les erreurs subtiles et les mauvaises surprises.

Par exemple, pour analyser une date au format « jour/mois/année » :

moment('12/03/2023', 'DD/MM/YYYY', true);

Liste des jetons courants et exemples

• Année: AAAA (2024), AA (24), Y (-500)
• mois:MM (01 – 12), MMM (janvier), MMMM (janvier)
• Jour: DD (01 – 31), C (1er – 31e)
• Heure: HH (00 – 23), hh (01 – 12), mm (minutes), ss (secondes)
• Fuseau horaire: Z, ZZ

Ces jetons peuvent être combinés pour créer des sorties entièrement personnalisées. Consultez la documentation pour la liste complète et les cas particuliers.