Travailler avec des dates et des heures en JavaScript a toujours été un peu lourd. Les méthodes de date natives sont détaillées et l'API est souvent incohérente . C'est pourquoi si vous posez une question relative à la date sur StackOverflow, vous entendrez souvent la réponse «Utiliser Moment.js».
Qu'est-ce que Moment.js?
Moment.js est un couteau suisse pour travailler avec des dates en JavaScript. Il vous permet d'analyser, de valider, de manipuler et d'afficher les dates et les heures à l'aide d'une API claire et concise.
Dans cet article, je vais vous montrer comment démarrer avec Moment.js, ainsi que plusieurs de ses cas d'utilisation courants.
Prise en main de Moment.js
Moment.js est librement disponible en téléchargement sur la page d'accueil du projet . Moment.js peut être exécuté à partir du navigateur ainsi qu'à partir d'une application Node. Pour l'utiliser avec Node, installez le module à l'aide de la commande suivante:
npm install moment
Ensuite, simplement require () et utilisez-le dans votre application comme indiqué ci-dessous.
const moment = require ('moment');
const aujourd'hui = moment ();
console.log (today.format ());
// 2020-01-09T15: 45: 51 + 01: 00
Pour exécuter Moment.js à partir du navigateur, incluez-le à l'aide d'une balise comme illustré ci-dessous. Moment.js crée un objet global moment qui peut être utilisé pour accéder à toutes les fonctionnalités d'analyse et de manipulation de la date et de l'heure.
Moment.js
Formatage de la date
Dans le passé, je me souviens avoir converti des chaînes de date en Date saisi des données individuelles, puis effectué des concatentations de chaînes. Moment.js a simplifié le processus de conversion de date dans n'importe quel format particulier. La conversion du format de date avec Moment est simple, comme le montre l'exemple suivant:
moment (). Format ('YYYY-MM-DD');
L'appel de moment () nous donne la date et l'heure actuelles, tandis que format () les convertit au format spécifié. Cet exemple met en forme une date sous la forme d'une année à quatre chiffres, suivie d'un trait d'union, suivi d'un mois à deux chiffres, d'un autre trait d'union et d'un jour à deux chiffres.
Voir le stylet
Formatage de la date avec Moment.js par SitePoint ( @SitePoint )
sur CodePen .
Astuce : Essayez d'expérimenter avec certains des autres formats de date répertoriés dans la documentation du projet .
Validation de la date
Une autre tâche ennuyeuse que Moment.js a grandement simplifiée est la validation de la date. Pour effectuer la validation, passez simplement une chaîne de date à l'objet moment avec le format de date souhaité, et appelez la méthode isValid () . Cela retournera vrai si la date est valide et faux sinon.
console.log (moment ("2020-01-01", "YYYY-MM-DD" ).est valable()); // vrai
console.log (moment ("pas de date", "AAAA-MM-JJ"). isValid ()); // faux
Sachez cependant que Moment vous donne la possibilité de travailler avec des dates partielles, ce qui peut conduire à des résultats inattendus.
console.log (
moment ("2019 a été une grande année parce que je me suis marié", "YYYY-MM-DD"). isValid ()
);
// Renvoie vrai car 2019 correspond à YYYY
Pour éviter cela, vous pouvez mettre Moment en mode d'analyse stricte en le passant true comme troisième argument.
console.log (
moment ("2019 a été une grande année parce que je me suis marié", "YYYY-MM-DD", true) .isValid ()
);
// faux
Voici un exemple pour présenter cette fonctionnalité.
Voir le stylet
Vérification de la validité de la date avec Moment.js par SitePoint ( @SitePoint )
sur
sur CodePen .
Il existe un certain nombre d'autres indicateurs utiles dans l'objet renvoyé par moment () :
- débordement - Ceci est défini lorsqu'un débordement se produit. Un exemple serait le 13e mois ou le 32e jour.
- invalidMonth - Défini lorsque le mois n'est pas valide, comme Jannnuaarry.
- vide - Défini lorsque la date entrée ne contient rien d'analysable.
- nullInput - Définissez lorsque la date entrée est
nulle .
Vous pouvez en savoir plus sur ces indicateurs et d'autres disponibles sur la page d'accueil du projet .
Manipulation des dates
Il existe un certain nombre d'options pour manipuler l'objet moment . Par exemple, vous pouvez ajouter ou soustraire des jours, des mois, des années, etc. Ceci est réalisé via les méthodes add () et subtract () . L'exemple suivant montre comment sept jours, mois ou semaines sont ajoutés à la date actuelle.
moment (). Add (7, 'days'); // ajoute 7 jours à la date actuelle
moment (). add (7, 'mois'); // ajoute 7 mois à la date actuelle
moment (). add (7, 'ans'); // ajoute 7 ans à la date actuelle
De même, la méthode subtract () est illustrée ci-dessous.
moment (). Subtract (7, 'days'); // soustrait 7 jours à la date actuelle
moment (). soustraire (7, «mois»); // soustrait 7 mois à la date actuelle
moment (). soustraire (7, «années»); // soustrait 7 ans à la date actuelle
Notez que chacun des exemples ci-dessus renverra l'objet moment . Si vous voulez une date lisible par l'homme, vous devrez la formater en conséquence.
const today = moment ();
const nextWeek = today.add (7, 'jours');
console.log (nextWeek.format ('jjjj MMMM, AAAA'));
// jeudi 16 janvier 2020
Time From Now
Une autre tâche courante consiste à déterminer combien de temps existe entre deux dates. Pour calculer l'heure à partir de la date actuelle, Moment.js utilise une méthode nommée fromNow () . Voici comment vérifier le temps écoulé depuis le début de la décennie:
moment ('2020.01.01', 'YYYY.MM.DD'). FromNow ();
// Il y a 9 jours
Si nous passons true comme argument, nous pouvons obtenir la valeur sans le suffixe.
moment ('2020.01.01', 'YYYY.MM.DD'). FromNow (true );
// 9 jours
Heure d'une autre date
La méthode fromNow () est utilisée pour comparer l'heure à la date actuelle. Ceci est juste un cas spécial de de () qui compare deux dates arbitraires. Un exemple utilisant de () est présenté ci-dessous.
const dateA = moment ('01 -01-1900 ',' DD-MM-YYYY ');
const dateB = moment ('01 -01-2000 ',' DD-MM-YYYY ');
console.log (dateA.from (dateB));
Vous pouvez jouer avec cette méthode dans la démo suivante.
Voir le stylo
Time From Another Date with Moment.js by SitePoint ( @SitePoint )
sur CodePen .
Calcul de la différence entre les dates
Moment.js offre un moyen de calculer la différence entre deux dates. La différence est calculée en millisecondes par défaut, mais peut également être renvoyée en jours, mois, années, etc. Pour calculer la différence, appelez la méthode diff () . Cette méthode prend une date comme premier argument. L'unité de temps peut être spécifiée à l'aide du deuxième argument facultatif. Si cela n'est pas inclus, des millisecondes sont utilisées. L'exemple et la démonstration suivants illustrent l'utilisation de diff () :
const dateB = moment ('2014-11-11');
const dateC = moment ('2014-10-11');
console.log ('La différence est', dateB.diff (dateC), 'millisecondes');
console.log ('La différence est', dateB.diff (dateC, 'jours'), 'jours');
console.log ('La différence est', dateB.diff (dateC, 'mois'), 'mois');
Voir le stylet
Calcul de la différence entre les dates avec Moment.js par SitePoint ( @SitePoint )
sur CodePen .
Requêtes de date
Moment.js fournit également diverses méthodes de comparaison de dates . Ces méthodes incluent isBefore () isAfter () et isSame () qui, comme leur nom l'indique, renvoient un booléen indiquant si une date est antérieure, après ou égale à une autre date. Un exemple utilisant estAfter () est illustré ci-dessous.
console.log (moment ('2020-01-01'). IsAfter ('2019-01-01')); // vrai
console.log (moment ('2020-01-01'). isAfter ('2020-01-08')); // faux
Il existe également une méthode isLeapYear () qui vérifie les années bissextiles.
console.log (moment ([2020]). IsLeapYear ()); // vrai
console.log (moment ([2019]). isLeapYear ()); // faux
Prise en charge internationale des langues
Moment.js offre une excellente prise en charge i18n . Il vous permet d'affecter une langue globale ou de définir la langue d'un objet moment particulier. Par défaut, il prend en charge la langue anglaise. Si vous souhaitez prendre en charge une autre langue, affectez les valeurs clés de cette langue particulière à moment.locale . L'exemple abrégé suivant, tiré des documents Moment.js montre comment le support peut être ajouté pour le français.
const moment = require ('moment');
moment.locale ('fr', {
mois: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split (' _ '),
en semaine: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split (' _ '),
relativeTime: {
avenir: 'dans% s',
passé: «il y a% s»,
s: «quelques secondes»,
m: «une minute»,
mm: '% d minutes',
h: «une heure»,
hh: '% d heures',
d: «un jour»,
dd: '% d jours',
M: «un mois»,
MM: '% d mois',
y: «un an»,
aa: '% d ans'
}
});
moment.locale ('fr');
console.log (moment (1316116057189) .fromNow ());
// il y a une heure
console.log (moment (). format ('jjjj MMMM, AAAA'));
// jeudi 9e janvier 2020
Voir le Pen
Internationalisation avec Moment.js par SitePoint ( @SitePoint )
sur CodePen .
Pourquoi Moment pourrait ne pas être un Good Fit
Bien que Moment.js soit une excellente bibliothèque de date et d'heure, c'est aussi quelque chose d'un géant. Par exemple, si vous l'utilisez avec webpack, juste un innocent requiert ('moment'); est suffisant pour que tous les des paramètres régionaux viennent pour le trajet. Cela augmente considérablement la taille de votre bundle et vous devez recourir aux plugins pour le récupérer.
Il est également livré avec de nombreuses fonctionnalités, mais contrairement aux bibliothèques comme Lodash , cela ne vous permet pas de choisir ceux dont vous avez besoin. Au contraire, vous devez toujours charger la bibliothèque entière.
Une autre plainte courante est que l'objet moment est modifiable. Cela peut entraîner une confusion parmi les développeurs. Considérez:
const moment = require ('moment');
const aujourd'hui = moment ();
const nextWeek = today.add (7, 'jours');
console.log (today.fromNow ());
À quoi vous attendriez-vous pour être connecté à la console? Malheureusement, la réponse est «dans 7 jours» (et non «il y a quelques secondes»), car le code today.add (7, «jours») a muté l'objet moment
Cela peut être évité en clonant l'objet moment avant d'effectuer des calculs de date, mais au moment où vous vous en souvenez, les chances sont que vous avez a déjà passé un certain temps à déboguer.
const moment = require ('moment');
const aujourd'hui = moment ();
const nextWeek = today.clone (). add (7, 'days');
console.log (today.fromNow ());
// il ya quelques secondes
Une alternative légère
Pour ceux d'entre vous qui recherchent une alternative plus légère, pensez à date-fns . Date-fns est immuable, renvoyant toujours une nouvelle date au lieu de changer celle que vous transmettez. Il a une API simple, est le compagnon idéal pour Webpack et avec son style fonction par fichier, vous pouvez choisir exactement ce dont vous avez besoin. [19659004] Si vous souhaitez en savoir plus, lisez: Introduction à date-fns - une bibliothèque de dates JavaScript légère
Conclusion
Moment.js est vraiment une bibliothèque géniale qui simplifie les manipulations liées à la date et à l'heure et validations. Dans cet article, nous nous sommes concentrés sur certaines des fonctionnalités de Moment.js qui aident à analyser, valider et manipuler les dates et heures dans le navigateur et les applications Node.js. Un certain nombre de plugins utiles sont également disponibles pour Moment.js. Des plugins comme ISO Calendar, Jalaali Calendar, et bien d'autres peuvent être trouvés sur la page de plugin officielle . Pour plus d'informations sur Moment.js, le lecteur est dirigé vers la documentation de la bibliothèque .
Source link
