Accueil Technologie

4 packages pour travailler avec la date et l’heure en JavaScript


Le support intégré de JavaScript pour la gestion des dates est utile, mais il peut être difficile à utiliser. Les opérations complexes telles que les conversions de fuseaux horaires et le formatage des dates sont souvent difficiles à réaliser.


Heureusement, il existe plusieurs paquets qui rendent le travail avec les dates et les heures en JavaScript moins stressant. Vous découvrirez ici quelques-uns de ces paquets et comment vous pouvez commencer à travailler avec eux.

1. Moment.js

Lorsqu’il s’agit de travailler avec des dates et des heures, l’objet JavaScript Date a des fonctionnalités limitées.

Moment.js, une bibliothèque JavaScript, a introduit de nombreuses fonctionnalités non disponibles dans l’objet Date natif. En conséquence, elle est devenue la bibliothèque de référence pour travailler avec les dates et les heures.

Pour installer Moment.js avec npm, exécutez la commande suivante depuis le répertoire de votre projet :

 npm install moment

Après l’installation, vous pouvez importer Moment.js dans votre projet et effectuer des opérations avec la bibliothèque :

 const moment = require('moment');
const now = moment();
const nowString = now.format('YYYY-MM-DD HH:mm:ss');

console.log(`The current date and time is ${nowString}`);

Cet extrait de code importe la bibliothèque Moment.js et crée un objet Moment en utilisant la date et l’heure actuelles avec l’option moment() . Il montre ensuite comment formater l’objet date créé en tant que chaîne de caractères à l’aide de la fonction format() qui prend un format date/heure comme argument.

Vous pouvez également utiliser cette bibliothèque pour ajouter et soustraire des intervalles de temps :

 const addTenMinutes = moment().add(10, 'minutes');
console.log(`${addTenMinutes.format('h:mm a')}`);

const subtractTwoDays = moment().subtract(2, 'days');
console.log(`${subtractTwoDays.format('dddd, MMMM Do YYYY')}`);

Le programme enregistre deux variables sur la console, dans des formats différents. La première, addTenMinutescontient le résultat de l’ajout de 10 minutes à la date et à l’heure actuelles. La seconde, subtractTwoDays, affiche la valeur de la date et de l’heure actuelles à laquelle deux jours ont été soustraits.

Moment.js peut effectuer d’autres opérations telles que la vérification des années bissextiles et la conversion d’un format de date à un autre.

Il est important de noter que Moment.js n’est plus maintenu par son équipe de développeurs. Les développeurs conseillent d’utiliser une alternative comme Luxon.js.

2. Luxon.js

Luxon.js est une bibliothèque JavaScript robuste et plus moderne pour travailler avec les dates. Alternative à Moment.js, elle répond aux limitations de l’ancienne bibliothèque comme la mutabilité.

Vous pouvez installer Luxon avec npm et importer son fichier DateTime dans votre projet Node.js à l’aide de la méthode require() fonction :

 const { DateTime } = require('luxon');

Dans Luxon, les objets DateTime font référence à des instances de temps qui vont jusqu’à la milliseconde.

Vous pouvez créer de nouveaux objets DateTime et d’accéder à leurs composants, tels que l’année, le mois, les minutes et les secondes :

 const now = DateTime.now();
const year = now.year;
const minute = now.minute;
const second = now.second;

Ce code crée un nouvel objet DateTime qui représente la date et l’heure actuelles à l’aide de la méthode now() . Il accède ensuite aux composants de cette date à l’aide de la méthode année, minuteet deuxième propriétés.

Une différence majeure entre Luxon.js et Moment.js est son caractère immuable. Tous les objets DateTime sont immuables dans Luxon, ce qui signifie que vous ne pouvez pas modifier les propriétés DateTime. En revanche, vous pouvez créer de nouvelles instances DateTime à partir d’instances existantes.

Par exemple :

 const now = DateTime.now();
const tomorrow = now.plus({ days: 1 });

Ce code crée un nouveau DateTime objet nommé demain sur la base de la maintenant à l’aide de l’objet plus en lui passant une valeur de 1 jour comme argument. La méthode plus crée un nouvel objet DateTime avec le nombre de jours spécifié ajouté à l’objet original.

Un autre avantage de Luxon.js est sa prise en charge fiable des fuseaux horaires, ce qui est essentiel pour travailler avec des dates et des heures dans les applications web modernes. La bibliothèque utilise l’API d’internationalisation des navigateurs modernes pour fournir une prise en charge précise des fuseaux horaires.

Cependant, l’un des inconvénients de Luxon.js est que ses ressources communautaires sont limitées.

3. Date-fns

Date-fns est une bibliothèque JavaScript très légère conçue pour travailler avec des dates et des heures. Elle s’appuie sur l’objet JavaScript natif.

Date-fns utilise des techniques de programmation fonctionnelle et incorpore une caractéristique immuable, ce qui simplifie le travail avec les dates et réduit la probabilité de bogues dans votre code.

Après avoir installé date-fns avec npm, importez le paquet dans votre programme en utilisant la fonction require :

 const { format, addDays } = require('date-fns');

Date-fns est modulaire. Il contient de nombreuses fonctions auxquelles vous pouvez accéder en déstructurant le paquetage, comme le montre le bloc de code ci-dessus. Le code n’importe que les fonctions format et addDays de la bibliothèque date-fns.

Voici un exemple d’utilisation de ces deux fonctions :

 const today = new Date();
const formattedDate = format(today, 'yyyy-MM-dd');
console.log(formattedDate);

const tomorrow = format(addDays(today, 1), 'yyyy-MM-dd');
console.log(tomorrow);

Ce programme démontre l’utilisation de la bibliothèque date-fns en JavaScript pour formater et manipuler des dates.

Il crée un nouveau Date objet représentant la date du jour. Il formate la date courante à l’aide de la méthode format de la bibliothèque date-fns.

Il utilise ensuite la fonction addDays pour créer un nouvel objet Date représentant la date de demain, le formate à l’aide de la fonction format et enregistre la date du jour et la date du lendemain sur la console dans « aaaa-MM-jj » format.

L’inconvénient de Date-fns est qu’il ne prend pas en charge les fuseaux horaires. Au lieu de cela, il utilise une bibliothèque séparée pour travailler avec les fuseaux horaires en utilisant des fonctions d’aide.

4. Day.js

Day.js, une autre bibliothèque très légère, est un bon choix si vous cherchez une alternative immuable, plus petite et plus rapide que Moment.js.

Vous pouvez installer Day.js en tant que paquetage dans votre projet JavaScript en exécutant la commande npm suivante :

 npm install dayjs

Pour importer Day.js dans votre projet après l’installation, vous pouvez utiliser le code suivant :

 const dayjs = require('dayjs')

Voici quelques fonctions et méthodes de base disponibles dans Day.js

 const now = dayjs();

const date = dayjs('2023-03-23', 'YYYY-MM-DD');

const month = date.month();

const formattedDate = date.format('MMMM D, YYYY');

const nextWeek = date.add(1, 'week');

Le code ci-dessus crée un nouvel objet Day.js représentant la date et l’heure actuelles, analyse une chaîne de date avec un format personnalisé et récupère le mois dans la base de données date . Elle montre également comment formater et ajouter des données à une instance de date. Il montre également comment formater et compléter une instance de date.

Comme Date-fns, Day.js ne peut pas fournir de support pour les fuseaux horaires. Day.js utilise un système de plugins, ce qui rend son utilisation difficile.

Parmi les paquets couverts, Day.js est le plus similaire à Moment.js. Il est donc plus facile de passer de l’un à l’autre en cas de besoin.

Choisir la bonne bibliothèque pour votre application

Choisir la bonne bibliothèque de date et d’heure pour votre application JavaScript est une décision importante qui peut avoir un impact considérable sur la qualité et la maintenabilité de votre code.

Chacune des bibliothèques présentées ici a ses forces et ses faiblesses, il est donc important d’évaluer soigneusement vos besoins avant de prendre une décision.

Leave your vote

0 0 votes
Évaluation de l'article
S’abonner
Notification pour
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires

Log In

Forgot password?

Don't have an account? Register

Forgot password?

Enter your account data and we will send you a link to reset your password.

Your password reset link appears to be invalid or expired.

Log in

Privacy Policy

Add to Collection

No Collections

Here you'll find all collections you've created before.

0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x

Newsletter

inscrivez vous pour recevoir nos actualités

Actualités, astuces, bons plans et cadeaux !