MomentJS - Guide rapide

MomentJS est une bibliothèque JavaScript qui aide à analyser, valider, manipuler et afficher la date / heure en JavaScript de manière très simple. Ce chapitre fournit un aperçu de MomentJS et décrit ses fonctionnalités en détail.

Moment JS permet d'afficher la date selon la localisation et dans un format lisible par l'homme. Vous pouvez utiliser MomentJS dans un navigateur en utilisant la méthode de script. Il est également disponible avec Node.js et peut être installé à l'aide de npm.

Dans MomentJS, vous pouvez trouver de nombreuses méthodes faciles à utiliser pour ajouter, soustraire, valider la date, obtenir la date maximale, minimale, etc. C'est un projet open source et vous pouvez facilement contribuer à la bibliothèque et ajouter des fonctionnalités sous forme de plugins et rendez-le disponible sur GitHub et dans Node.js.

traits

Laissez-nous comprendre en détail toutes les fonctionnalités importantes disponibles avec MomentJS -

Analyse

L'analyse vous permet d'analyser la date au format requis. L'analyse de la date est disponible sous forme de chaîne, d'objet et de tableau. Il vous permet de cloner le moment en utilisant moment.clone. Il existe des méthodes disponibles qui donnent la sortie de la date au format UTC.

Validation de la date

La validation de date est très facile avec MomentJS. Vous pouvez utiliser la méthodeisValid()et vérifiez si la date est valide ou non. MomentJS fournit également de nombreux indicateurs d'analyse qui peuvent être utilisés pour vérifier la validation de la date.

Manipulation

Il existe différentes méthodes pour manipuler la date et l'heure sur l'objet moment. add, soustract, startoftime, endoftime, local, utc, utcoffset etc., sont les méthodes disponibles qui donnent les détails requis sur la date / heure dans MomentJS.

Se mettre

Get / Set permet de lire et de régler les unités de la date. Il permet de changer ainsi que de lire heure, minute, seconde, milliseconde, date du mois, jour de la semaine, jour de l'année, semaine de l'année, mois, année, trimestre, semaine année, semaines dans l'année, get / set, maximum , minimum etc. Get / Set est une fonctionnalité très utile disponible dans MomentJS.

Afficher

L'affichage fournit des formats pour afficher la date de différentes manières. Il existe des méthodes disponibles qui indiquent l'heure à partir d'un moment donné, à partir du moment actuel, la différence entre deux moments, etc. Il permet d'afficher la date au format JSON, Array, Object, String etc.

Requêtes de date

Les requêtes de date ont des méthodes faciles à utiliser qui indiquent si la date est supérieure ou inférieure à l'entrée, entre les dates données, est une année bissextile, est un moment, est une date, etc. C'est très utile avec la validation de date.

Durées

Les durées sont l'une des fonctionnalités importantes de MomentJS. Il gère essentiellement la longueur du temps pour des unités données. lehumanize La méthode disponible affiche la date dans un format lisible par l'homme.

Internationalisation

L'internationalisation est encore une autre caractéristique importante de MomentJS. Vous pouvez afficher la date et l'heure en fonction des paramètres régionaux. Les paramètres régionaux peuvent être appliqués à un moment spécifique si nécessaire. Vous obtiendrez un fichier minifié sur le site d'accueil de MomentJS contenant tous les paramètres régionaux. Dans le cas où vous avez affaire à une locale spécifique, vous pouvez également ajouter uniquement ce fichier de locale et travailler avec elle. Les noms des mois, semaines et jours sont affichés dans les paramètres régionaux spécifiés.

Personnalisation

MomentJS permet la personnalisation des paramètres régionaux créés. Vous pouvez personnaliser les noms de mois, l'abréviation du mois, les noms des jours de la semaine, l'abréviation des jours de la semaine, le format de date longue et le format de calendrier pour un paramètre régional défini selon vos besoins.

Utilitaires

Les utilitaires sont livrés avec deux méthodes: normalize units et invalid. Ils sont utilisés avec le moment et nous aident à modifier ou à personnaliser la sortie selon nos besoins. Il permet également de définir notre propre validation personnalisée sur l'objet moment.

Plugins

Les plugins sont des fonctionnalités supplémentaires de MomentJS. Il existe de nombreux plugins ajoutés aux calendriers, au format de date, à l'analyse, aux plages de dates, à la plage précise, etc. Vous pouvez ajouter vos propres plugins et les rendre disponibles avec Node.js et GitHub.

Dans ce chapitre, vous apprendrez en détail comment configurer l'environnement de travail de MomentJS sur votre ordinateur local. Avant de commencer à travailler sur MomentJS, vous devez avoir accès à la bibliothèque. Vous pouvez accéder à ses fichiers dans l'une des méthodes suivantes -

Méthode 1: Utilisation du fichier MomentJS dans le navigateur

Dans cette méthode, nous allons avoir besoin du fichier MomentJS de son site officiel et l'utiliser directement dans le navigateur.

Étape 1

Dans un premier temps, rendez-vous sur le site officiel de MomentJS https://momentjs.comVous trouverez la page d'accueil comme indiqué ici -

Notez qu'il existe une option de téléchargement disponible qui vous donne le dernier fichier MomentJS disponible. Notez que le fichier est disponible avec et sans minification.

Étape 2

Maintenant, incluez moment.js à l'intérieur de scripttag et commencez à travailler avec MomentJS. Pour cela, vous pouvez utiliser le code ci-dessous -

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>

Voici un exemple de travail et sa sortie pour une meilleure compréhension -

Exemple

<html>
   <head>
      <title>MomentJS - Working Example</title>
      <script type = "text/JavaScript" src = "https://MomentJS.com/downloads/moment.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "todaysdate"></div>
      <script type = "text/JavaScript">
         var a = moment().toString();
         document.getElementById("todaysdate").innerHTML = a;
      </script>
   </body>
</html>

Production

le moment-localeLe fichier pour travailler avec différents paramètres régionaux est également disponible, comme indiqué dans la capture d'écran ci-dessus. Maintenant, ajoutez le fichier à la balise de script comme indiqué ci-dessous et travaillez avec différents paramètres régionaux de votre choix. Pour cela, vous pouvez utiliser le code ci-dessous -

<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>

Voici un exemple de travail pour moment-locale et sa sortie pour une meilleure compréhension -

<html>
   <head>
      <script type = "text/JavaScript" src ="https://MomentJS.com/downloads/moment-with-locales.js"></script>
   </head>
   <body>
      <h1>Moment Locale</h1>
      <div id = "datedisplay" style = "font-size:30px;"></div>
      <script type = "text/JavaScript">
         var a = moment.locale("fr");
         var c = moment().format("LLLL");
         document.getElementById("datedisplay").innerHTML = c;
      </script>
   </body>
</html>

Production

Méthode 2: Utilisation de Node.js

Si vous optez pour cette méthode, assurez-vous d'avoir Node.js et npminstallé sur votre système. Vous pouvez utiliser la commande suivante pour installer MomentJS -

npm install moment

Vous pouvez observer la sortie suivante une fois que MomentJS est installé avec succès -

Maintenant, pour tester si MomentJS fonctionne correctement avec Node.js, créez le fichier test.js et ajoutez-y le code suivant -

var moment = require('moment');
var a = moment().toString();
console.log(a);

Maintenant, dans l'invite de commande, exécutez le noeud de commande test.js comme indiqué dans la capture d'écran ci-dessous -

Notez que cette commande affiche la sortie pour moment().toString().

Méthode 3: Utilisation de Bower

Bower est une autre méthode pour obtenir les fichiers requis pour MomentJS. Vous pouvez utiliser la commande suivante pour installer MomentJS en utilisant Bower -

bower install --save moment

La capture d'écran ci-dessous montre l'installation de MomentJS en utilisant Bower -

Ce sont les fichiers chargés depuis Bower pour MomentJS à installer. Les fichiers de moment et de paramètres régionaux installés sont affichés dans l'image ci-dessous -

Dans ce chapitre, nous verrons comment travailler avec MomentJS using RequireJS et MomentJS and TypeScript.

MomentJS et RequireJS

Pour comprendre le fonctionnement de MomentJS en utilisant RequireJS, analysons un exemple de travail avec MomentJS et RequireJS. La structure des dossiers de l'application correspondante est illustrée dans l'image suivante -

Vous pouvez obtenir le fichier require.js récupéré sur le site officiel de RequireJS -https://requirejs.org/docs/download.html. Observez le code suivant pour une meilleure compréhension -

Exemple project.html

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS and MomentJS</title>
      <!-- data-main attribute tells require.js to load
         scripts/main.js after require.js loads. -->
      <script data-main="scripts/main" src="scripts/require.js"></script>
   </head>
   <body>
      <h1>RequireJS and MomentJS</h1>
      <div id="datedisplay" style="font-size:25px;"></div>
   </body>
</html>

main.js

require.config({
   paths:{
      'momentlocale':'libs/momentlocale',
   },
});
require(['momentlocale'], function (moment) {
   moment.locale('fr');
   var a = moment().format("LLLL");
   document.getElementById("datedisplay").innerHTML = a;
});

Notez que Moment.js et momentlocale.js sont dans le dossier libs.

Ce qui suit est la sortie pour project.html que vous observerez dans le navigateur -

MomentJS et TypeScript

Le code utilisé pour construire le projet MomentJS et Typescript est comme indiqué ci-dessous -

package.json

{
   "name": "momenttypescript",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "browserify": "^16.2.0",
      "gulp": "^3.9.1",
      "gulp-connect": "^5.5.0",
      "gulp-typescript": "^4.0.2",
      "moment": "^2.22.1",
      "tsify": "^4.0.0",
      "typescript": "^2.8.3",
      "vinyl-source-stream": "^2.0.0"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

Notez que les dépendances disponibles dans package,json doit être installé à l'aide de npm install.

main.ts

import * as moment from 'moment';
let now = moment().format('LLLL');
document.getElementById("datedisplay").innerHTML = now;

Tu dois use Gulp pour construire le fichier de dactylographié à JavaScript, c'est-à-dire à partir de main.ts à main.js. Le code suivant montre legulpfile.js qui est utilisé pour construire le fichier. Notez que nous avons utiliségulp-connect package qui ouvre un serveur local pour afficher la sortie.

gulpfile.js

var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var tsify = require("tsify");
var source = require("vinyl-source-stream");
gulp.task("build", function (cb) {
   runSequence("browserify", "minify", cb);
});
gulp.task("startserver", ["browserify", "connect"]);
gulp.task("browserify", function () {
var b = browserify({
   insertGlobals: true,
   debug: false
}) .add("src/main.ts") .plugin(tsify, { typescript: require("typescript") });
return b
   .bundle()
   .pipe(source("main.js"))
   .pipe(gulp.dest("build/"));
});
gulp.task("connect", function () {
   connect.server({
      root: ".",
      // port: '80',
      livereload: true
   });
});

C'est la sortie que vous observez lorsque vous exécutez le code donné ci-dessus -

Vous pouvez voir la structure des dossiers comme indiqué dans le format suivant -

Le code pour index.html est indiqué ci-dessous -

<html>
   <head></head>
   <body>
      <h1>MomentJS and typescript</h1>
      <div id="datedisplay" style="font-size:30px;"></div>
      <script src="build/main.js"></script>
   </body>
</html>

Maintenant, si vous ouvrez http://localhost:8080/, vous pouvez voir la sortie comme indiqué ci-dessous -

MomentJS a de nombreuses méthodes faciles à utiliser qui aident à analyser la date et l'heure. Il peut analyser les dates sous forme d'objet, de chaîne, de tableau, d'objet de date natif JavaScript, etc. Ce chapitre les aborde en détail.

Date d'analyse

MomentJS donne un objet wrapper en sortie lorsque moment()est appelé. Vous pouvez observer ce qui suit lorsque vous consolez la sortie dans le navigateur.

MomentJS fournit diverses méthodes pour analyser la date comme indiqué ci-dessous -

N ° Sr.	Méthode et syntaxe
1	Maintenant moment()
2	Chaîne moment (chaîne)
3	Objet moment (objet)
4	Date moment (date)
5	Tableau moment (Array [])
6	Horodatage Unix moment (nombre)
sept	Clone de moment moment (moment)
8	UTC moment.utc ()
9	parseZone moment.parseZone ()
dix	Données de création moment (). creationData ();
11	Par défaut var m = moment ({heure: 3, minute: 40, secondes: 10});

MomentJSgère la validation de la date de manière simple. Vous n'avez pas besoin d'écrire beaucoup de code pour valider la date.isValid()est la méthode disponible sur le moment qui indique si la date est valide ou non. MomentJS fournit également de nombreux indicateurs d'analyse qui peuvent être utilisés pour vérifier la validation de la date.

Analyser les indicateurs

MomentJS fournit les indicateurs d'analyse suivants dans les cas où la date donnée est considérée comme invalide -

overflow - Cela se produira lorsque le mois donné est le 13, le jour est le 367 dans une année ou le 32 dans un mois, le 29 pour février sur une année non bissextile etc. Le débordement contient l'index de l'unité invalide à faire correspondre invalidAt. Notez que-1 signifie pas de débordement.

invalidMonth- Il affiche un nom de mois invalide. Il donnera la chaîne de mois invalide ou null.

Empty- Lorsqu'une entrée est donnée qui n'est pas une date. Cela donne un booléen.

nullInput - Une entrée nulle, comme moment (null); Elle renvoie un booléen.

invalidFormat - Lorsque le format donné est vide tel que moment('2018-04-25', []). Cela rend booléen.

userInvalidated - Une date créée explicitement comme invalide, telle que moment.invalid(). Il renvoie booléen.

meridiem- Indique le méridième (AM / PM) analysé, le cas échéant. Il renvoie une chaîne.

parsedDateParts - Il renvoie un tableau de parties de date analysées telles que parsedDateParts[0] comme année, parsedDateParts[1] comme mois et parsedDateParts[2]comme jour. Si aucune pièce n'est présente, mais que le méridiem a une valeur, la date n'est pas valide. Il renvoie un tableau.

Prenons l'exemple suivant pour comprendre la validation de la date -

var a = moment("2018-18-10T10:20:25");
a.isValid();
a.invalidAt();

Production

InvalidAt donne la sortie comme 1, qui pointe vers le mois car la valeur du mois est supérieure à 12 et qu'elle déborde. S'il y a un débordement, invalidAt donnera la sortie comme indiqué dans le tableau donné ici -

0	ans
1	mois
2	journées
3	heures
4	minutes
5	secondes
6	millisecondes

S'il y a plusieurs débordements dans la date donnée, ce sera une sortie pour le premier index débordé.

MomentJS a de nombreuses méthodes pour obtenir / définir les entrées de date. Get nous permettra de lire l'unité d'entrée requise et le réglage permettra de modifier l'unité d'entrée. Ce chapitre décrit en détail les méthodes get / set à utiliser sur le moment.

Le tableau suivant montre les méthodes get / set disponibles -

Méthode	Syntaxe
Milliseconde	moment (). milliseconde (nombre) moment (). milliseconde (); moment (). millisecondes (nombre); moment (). millisecondes ();
Seconde	moment (). seconde (nombre); moment (). seconde (); moment (). secondes (nombre); moment (). secondes ();
Minute	moment (). minute (nombre); moment (). minute (); moment (). minutes (nombre); moment (). minutes ();
Heure	moment (). date (nombre); moment (). date (); moment (). dates (nombre); moment (). dates ();
Jour de la semaine	moment (). jour (Nombre \| Chaîne); moment (). jour (); moment (). jours (Nombre \| Chaîne); moment (). jours ();
Date du mois	moment (). date (nombre); moment (). date (); moment (). dates (nombre); moment (). dates ();
Jour de l'année	moment (). dayOfYear (nombre); moment (). dayOfYear ();
Semaine de l'année	moment (). semaine (nombre); moment (). semaine (); moment (). semaines (nombre); moment (). semaines ();
Semaine de l'année (ISO)	moment (). isoWeek (nombre); moment (). isoWeek (); moment (). isoWeeks (nombre); moment (). isoWeeks ();
Mois	moment (). mois (Nombre \| Chaîne); moment (). mois ();
Trimestre	moment (). quart (); moment (). quart (nombre); moment (). quarts (); moment (). quarts (nombre);
An	moment (). année (nombre); moment (). année ();
Week year	moment (). weekYear (nombre); moment (). weekYear ();
Weeks in year	moment (). weeksInYear ();
Avoir	moment (). get ('année'); moment (). get ('mois'); moment (). get ('date'); moment (). get ('heure'); moment (). get ('minute'); moment (). get ('seconde'); moment (). get ('milliseconde');
Ensemble	moment (). set (String, Int); moment (). set (Object (String, Int));
Maximum	moment.max (Moment [, Moment ...]); moment.max (Moment []);
Le minimum	moment.min (Moment [, Moment ...]); moment.min (Moment []);

MomentJSfournit diverses méthodes pour manipuler la date et l'heure sur l'objet moment. Ce chapitre traite de toutes ces méthodes en détail.

Méthodes pour manipuler la date et l'heure

Le tableau suivant montre les méthodes disponibles dans MomentJS qui aident à manipuler la date et l'heure selon les besoins -

N ° Sr.	Méthode et syntaxe
1	Ajouter moment.add ()
2	Soustraire moment.subtract ()
3	Début de l'heure moment.startof ()
4	Fin du temps moment.endof ()
5	Local moment.local ()
6	UTC moment.utc ()
sept	Décalage UTC moment.utcOffset ()

MomentJS fournit des formats pour afficher la date de différentes manières. Il existe des méthodes disponibles qui indiquent l'heure à partir d'un moment donné, à partir du moment actuel, la différence entre deux moments, etc. Il peut afficher la date au format JSON, Array, Object, String etc.

Méthodes de mise en forme de la date et de l'heure

Le tableau suivant présente une liste des méthodes disponibles qui aident à afficher / mettre en forme la date selon les besoins.

Méthode	Syntaxe
Format	moment (). format (); moment (). format (chaîne);
À partir de maintenant	moment (). fromNow (); moment (). fromNow (Booléen);
Heure de X	moment (). from (Moment \| Chaîne \| Numéro \| Date \| Tableau);
Il est temps maintenant	moment (). toNow (); moment (). toNow (Booléen);
Temps pour X	moment (). to (Moment \| Chaîne \| Numéro \| Date \| Tableau); moment (). to (Moment \| Chaîne \| Numéro \| Date \| Tableau, Booléen);
Heure du calendrier	moment (). calendrier (); moment (). calendrier (referenceTime); moment (). calendar (referenceTime, formats);
Différence	moment (). diff (Moment \| Chaîne \| Numéro \| Date \| Tableau); moment (). diff (Moment \| Chaîne \| Numéro \| Date \| Tableau, Chaîne); moment (). diff (Moment \| Chaîne \| Numéro \| Date \| Tableau, Chaîne, Booléen);
Horodatage Unix (millisecondes)	moment (). valueOf (); + moment ();
Horodatage Unix (secondes)	moment (). unix ();
Jours dans le mois	moment (). daysInMonth ();
En tant que date JavaScript	moment (). toDate ();
En tant que tableau	moment (). toArray ();
Comme JSON	moment (). toJSON ();
Comme chaîne ISO 8601	moment (). toISOString (); moment (). toISOString (keepOffset);
En tant qu'objet	moment (). toObject ();
En tant que chaîne	moment (). toString ();
Inspecter	moment (). inspect ();

MomentJS fournit des méthodes pour interroger la date / heure pour l'année bissextile, la comparaison de date, la validation de date, etc.

Méthodes d'interrogation de la date dans MomentJS

Le tableau suivant montre les méthodes disponibles dans MomentJS et leur syntaxe pour interroger la date -

Méthode	Syntaxe
Est avant	moment (). isBefore (Moment \| Chaîne \| Numéro \| Date \| Tableau); moment (). isBefore (Moment \| Chaîne \| Numéro \| Date \| Tableau, Chaîne);
Est le même	moment (). isSame (Moment \| Chaîne \| Numéro \| Date \| Tableau); moment (). isSame (Moment \| Chaîne \| Numéro \| Date \| Tableau, Chaîne);
Est après	moment (). isAfter (Moment \| Chaîne \| Numéro \| Date \| Tableau); moment (). isAfter (Moment \| Chaîne \| Numéro \| Date \| Tableau, Chaîne);
Est identique ou avant	moment (). isSameOrBefore (Moment \| Chaîne \| Numéro \| Date \| Tableau); moment (). isSameOrBefore (Moment \| String \| Number \| Date \| Array, String);
Est le même ou après	moment (). isSameOrAfter (Moment \| Chaîne \| Numéro \| Date \| Tableau); moment (). isSameOrAfter (Moment \| Chaîne \| Numéro \| Date \| Tableau, Chaîne);
Est entre	moment (). isBetween (semblable à un moment, semblable à un moment); moment (). isBetween (semblable à un moment, semblable à un moment, String);
Est-ce l'heure d'été	moment (). isDST ();
Est l'année bissextile	moment (). isLeapYear ();
Est un moment	moment.isMoment (obj);
Est une date	moment.isDate (obj);

L'internationalisation est l'une des fonctionnalités importantes de MomentJS. Vous pouvez afficher la date et l'heure en fonction de la localisation, en d'autres termes, en fonction du pays / de la région. Les paramètres régionaux peuvent être appliqués à un moment spécifique si nécessaire.

Ce chapitre explique en détail comment faire appliquer les paramètres régionaux globalement, localement, travailler avec les paramètres régionaux en utilisant Node.js, dans le navigateur, obtenir les unités (mois, jours de la semaine, etc.) dans les paramètres régionaux requis, etc.

N ° Sr.	Paramètres régionaux et description
1	Paramètres régionaux globaux Nous pouvons attribuer des paramètres régionaux globalement et tous les détails de date / heure seront disponibles dans les paramètres régionaux affectés.
2	Modification locale des paramètres régionaux Nous avons besoin d'une locale à appliquer localement au cas où nous aurions besoin de gérer de nombreuses locales dans une application.
3	Utilisation des paramètres régionaux dans le navigateur Nous pouvons commencer à travailler avec les paramètres régionaux en incluant le fichier de paramètres régionaux dans la balise script.
4	Utilisation des paramètres régionaux à l'aide de Node.js Si vous utilisez Node.js, vous aurez déjà les fichiers régionaux au moment où vous installez npm moment.
5	momentjs_Liste des détails de date / heure de la langue actuelle Vous pouvez définir les paramètres régionaux et vérifier les détails tels que les mois, les jours de la semaine, etc.
6	Vérification des paramètres régionaux actuels Nous pouvons vérifier la locale actuelle en utilisant moment.locale ().
sept	Accès aux fonctionnalités spécifiques aux paramètres régionaux Ici, vous verrez les méthodes et propriétés disponibles sur les paramètres régionaux actuellement chargés.

MomentJSpermet d'ajouter une personnalisation aux paramètres régionaux créés. Ce chapitre les aborde en détail.

La liste suivante montre les personnalisations possibles sur la localisation -

N ° Sr.	Localisation et description
1	Noms de mois Vous pouvez ajouter des noms de mois à la personnalisation des paramètres régionaux.
2	Abréviation du mois Cette méthode permet de personnaliser les abréviations des mois.
3	Noms des jours de la semaine Cette méthode aide à personnaliser les noms des jours de la semaine selon les paramètres régionaux.
4	Abréviation du jour de la semaine Cette méthode permet de personnaliser les abréviations des jours de semaine en fonction de l'ensemble des paramètres régionaux.
5	Abréviation minimale du jour de la semaine Cette méthode permet de personnaliser les abréviations minimales des jours de la semaine en fonction de l'ensemble des paramètres régionaux.
6	Formats de date longue Cette méthode aide à personnaliser le format longdate pour un paramètre régional.
sept	Temps relatif Cette méthode aide à obtenir le temps relatif.
8	MATIN APRÈS-MIDI Cette méthode aide à personnaliser le méridième selon les paramètres régionaux.
9	Analyse AM / PM Vous pouvez analyser AM / PM en utilisant cette méthode.
dix	Calendrier Cela aide à personnaliser l'objet de calendrier pour un ensemble de paramètres régionaux.
11	Ordinal L'affichage ordinal des dates peut être modifié en fonction des paramètres régionaux.
12	Seuils de temps relatifs Ceci est utilisé avec duration.humanize où la durée de la durée est affichée sous forme de few seconds ago, in a minute, an hour ago etc.

MomentJS fournit une fonctionnalité importante appelée durées qui gère la durée pour des unités données. Dans ce chapitre, vous apprendrez cela en détail.

Méthodes disponibles avec durées

Le tableau suivant montre les méthodes disponibles avec la durée pour différentes unités à utiliser avec la durée du moment -

Méthode	Syntaxe
Création	moment.duration (nombre, chaîne); moment.duration (nombre); moment.duration (objet); moment.duration (chaîne);
Cloner	moment.duration (). clone ();
Humaniser	moment.duration (). humanize ();
Millisecondes	moment.duration (). millisecondes (); moment.duration (). asMillisecondes ();
Secondes	moment.duration (). secondes (); moment.duration (). asSeconds ();
Minutes	moment.duration (). minutes (); moment.duration (). asMinutes ();
Heures	moment.duration (). heures (); moment.duration (). asHours ();
Journées	moment.duration (). jours (); moment.duration (). asDays ();
Semaines	moment.duration (). semaines (); moment.duration (). asWeeks ();
Mois	moment.duration (). mois (); moment.duration (). asMonths ();
Years	moment.duration (). années (); moment.duration (). asYears ();
Ajouter du temps	moment.duration (). add (nombre, chaîne); moment.duration (). add (nombre); moment.duration (). add (Durée); moment.duration (). add (objet);
Soustraire le temps	moment.duration (). soustract (nombre, chaîne); moment.duration (). soustract (nombre); moment.duration (). soustract (Durée); moment.duration (). soustract (objet);
Utilisation de la durée avec Diff	var durée = moment.duration (x.diff (y))
Comme unité de temps	moment.duration (). as (String);
Obtenir l'unité de temps	duration.get ('heures'); duration.get ('minutes'); duration.get ('secondes'); duration.get ('millisecondes');
Comme JSON	moment.duration (). toJSON ();
Est une durée	moment.isDuration (obj);
Comme chaîne ISO 8601	moment.duration (). toISOString ();
Lieu	moment.duration (). locale (); moment.duration (). locale (chaîne);

Dans MomentJS, vous pouvez modifier ou personnaliser la sortie selon l'exigence en utilisant des unités de normalisation et des méthodes non valides. Vous pouvez également définir votre propre validation personnalisée sur l'objet moment.

Observez le tableau suivant pour plus d'informations -

N ° Sr.	Méthode et syntaxe
1	Normaliser les unités moment.normalizeUnits (chaîne);
2	Invalide moment.invalid (objet);

Les plugins sont des fonctionnalités étendues ajoutées sur MomentJS. MomentJS est un projet open source et de nombreux plugins se trouvent dans MomentJS qui sont fournis par ses utilisateurs et disponibles à l'aide de Node.js et GitHub.

Ce chapitre traite de certains des plugins de calendriers et des plugins de formats de date disponibles dans MomentJS.

Plugins de calendrier

Cette section traite de deux types de plugins de calendrier: ISO calendar and Taiwan calendar.

Calendrier ISO

Vous pouvez utiliser la commande suivante pour l'installer avec Node.js -

npm install moment-isocalendar

Vous pouvez obtenir le moment-isocalendar.js depuis GitHub - https://github.com/fusionbox/moment-isocalendar Observez l'exemple de travail suivant avec isocalendar et MomentJS -

Example

var m = moment().isocalendar();

Output

Example

var m = moment.fromIsocalendar([2018, 51, 10, 670]).format('LLLL');

Output

Calendrier de Taiwan

Vous pouvez utiliser la commande suivante pour l'installer avec Node.js -

npm install moment-jalaali

Vous pouvez obtenir le moment-taiwan.js depuis GitHub - https://github.com/bradwoo8621/moment-taiwan Observez l'exemple de travail suivant avec isocalendar et MomentJS -

Example

var m = moment('190/01/01', 'tYY/MM/DD');
var c = m.twYear();

Output

Plugins de formats de date

Cette section traite des types suivants de plug-ins de format de date -

Analyseur de format de date Java
Formateur de date courte
Format de date d'analyse
Format de durée
Plage de dates
Gamme précise

Analyseur de format de date Java

Vous pouvez utiliser la commande suivante pour l'installer avec Node.js -

Vous pouvez obtenir le moment-jdateformatparser.js depuis GitHub - https://github.com/MadMG/moment-jdateformatparser Observez l'exemple de travail suivant pour moment-jdateformatparser et MomentJS -

Example

var m = moment().formatWithJDF("dd.MM.yyyy");

Output

Formateur de date courte

Le fichier JavaScript pour shortdateformat peut être extrait de GitHub -

https://github.com/researchgate/moment-shortformat

Syntax

moment().short();

L'affichage ressemble à celui indiqué dans le tableau ici -

À partir du moment	À partir du moment (). Court ()
0 à 59 secondes	0 à 59 s
1 à 59 minutes	1 à 59 m
1 à 23 heures	1h à 23h
1 à 6 jours	1d à 6d
> = 7 jours et même année	L'affichage sera comme le 3 février, 6 mars
> = 7 jours et année diff	L'affichage sera comme tel que 3 février 2018, 6 mars 2018

Vous pouvez prendre le script pour momentshort à partir du lien GitHub donné ci-dessus.

Example

var a = moment().subtract(8, 'hours').short();
var b = moment().add(1, 'hour').short(true);

Output

Si vous souhaitez supprimer le suffixe ago ou in, vous pouvez passer de vrai à court (tru.

Format de date d'analyse

Vous pouvez utiliser la commande suivante pour l'installer avec Node.js -

npm install moment-parseformat

Example

var a = moment.parseFormat('Friday 2018 27 april 10:28:10');

Output

Observez que la sortie montre que quels que soient les paramètres (date / heure) donnés au parseFormat, il donne le format de la date comme indiqué ci-dessus.

Format de durée

Vous pouvez utiliser la commande suivante pour installer le format de durée sur Node.js -

Le référentiel pour le format de durée est disponible ici - https://github.com/jsmreese/moment-duration-format Voyons un exemple de travail avec le format de durée -

Example

var a = moment.duration(969, "minutes").format("h:mm:ss");

Output

Cela ajoute plus de détails à la durée au moment créé.

Plage de dates

Vous pouvez utiliser la commande suivante pour installer la plage de dates sur Node.js -

npm install moment-range

Example

window['moment-range'].extendMoment(moment);
var start = new Date(2012, 0, 15);
var end = new Date(2012, 4, 23);
var range = moment.range(start, end);
console.log(range.start._d);
console.log(range.end._d);

Output

Gamme précise

La plage précise affichera la différence de date exacte en date, heure et dans un format lisible par l'homme. Vous pouvez utiliser la commande suivante pour installer une plage précise sur Node.js -

npm install moment-precise-range-plugin

Example

var a = moment("1998-01-01 09:00:00").preciseDiff("2011-03-04 18:05:06");

Output

Jusqu'à présent, nous avons appris de nombreux concepts dans MomentJS. Ce chapitre vous donne d'autres exemples pour une meilleure compréhension.

Afficher la plage de dates entre deux dates

Ceci est un exemple qui affiche les dates entre deux dates données.

<!DOCTYPE html>
<html>
   <head>
      <script type="text/JavaScript" src="MomentJS.js"></script>
      <style>
      table, td {
         border: 1px solid #F1E8E8;
         border-collapse: collapse;
         padding: 4px;
      }
      table tr:nth-child(odd) {
         background-color: #CFCACA;
      }
      table tr:nth-child(even) {
         background-color: #C4B4B4;
      }
      </style>
   </head>
   
   <body>
      <h1>Dates display between 2014-05-01 and 2014-05-16</h1>
      <div id="container">
         <table id="datedetails" ></table>
      </div>
      <script type="text/JavaScript">
         function getDaterange(start, end, arr) {
            if (!moment(start).isSameOrAfter(end)) {
               if (arr.length==0) arr.push(moment(start).format("dddd, MMMM Do YYYY, h:mm:ss a"));
               var next = moment(start).add(1, 'd');
               arr.push(next.format("dddd, MMMM Do YYYY, h:mm:ss a"));
               getDaterange(next, end, arr);
            } else {
               return arr;
            }
            return arr;
         }
         var a = getDaterange("2014-05-01", "2014-05-16", []);
         var tr = "";
         for (var i = 0; i<a.length;i++ ) {
            tr += "<tr><td>"+a[i]+"</td></tr>";
         }
         document.getElementById("datedetails").innerHTML = tr;
      </script>
   </body>
</html>

Nous voulons afficher toutes les dates entre 2014-05-01 à 2014-05-16. Nous avons utilisé la requête de dateisSameOrAfter, date addition and date format pour réaliser ce que nous voulons.

Production

Afficher les dimanches entre le 01/05/2014 et le 16/08/2014

<!DOCTYPE html>
<html>
   <head>
      <script type="text/JavaScript" src="MomentJS.js"></script>
      <style>
         table, td {
            border: 1px solid #F1E8E8;
            border-collapse: collapse;
            padding: 4px;
         }
         table tr:nth-child(odd) {
            background-color: #CFCACA;
         }
         table tr:nth-child(even) {
            background-color: #C4B4B4;
         }
      </style>
   </head>
   
   <body>
      <h1>Sundays between 2014-05-01 and 2014-08-16</h1>
      <div id="container">
         <table id="datedetails"></table>
      </div>
      <script type="text/JavaScript">
         function getDaterange(start, end, arr) {
            if (!moment(start).isSameOrAfter(end)) {
               if (arr.length==0) {
                  if (moment(start).format("dddd") === "Sunday") {
                     arr.push(moment(start).format("dddd, MMMM Do YYYY, h:mm:ss a"));
                  }
               }
               var next = moment(start).add(1, 'd');
               if (moment(next).format("dddd") === "Sunday") {
                  arr.push(next.format("dddd, MMMM Do YYYY, h:mm:ss a"));
               }
               getDaterange(next, end, arr);
            } else {
               return arr;
            }
            return arr;
         }
         var a = getDaterange("2014-05-01", "2014-08-16", []);
         var tr = "";
         for (var i = 0; i<a.length;i++ ) {
            tr += "<tr><td>"+a[i]+"</td></tr>";
         }
         document.getElementById("datedetails").innerHTML = tr;
      </script>
   </body>
</html>

Production

Afficher les détails de la date selon les paramètres régionaux

Ici, nous utilisons le script moment.locale qui contient tous les paramètres régionaux.

<!DOCTYPE html>
<html>
   <head>
      <script type="text/JavaScript" src="MomentJS.js"></script>
      <script type="text/JavaScript" src="momentlocale.js" charset="UTF-8"></script>
      <style type="text/css">
         div {
            margin-top: 16px!important;
            margin-bottom: 16px!important;
            width:100%;
         }
         table, td {
            border: 1px solid #F1E8E8;
            border-collapse: collapse;
            padding: 4px;
         }
         table tr:nth-child(odd) {
            background-color: #CFCACA;
         }
         table tr:nth-child(even) {
            background-color: #C4B4B4;
         }
      </style>
   </head>
   
   <body>
      <div >
         Select Locale : <select id="locale" onchange="updatelocale()" style="width:200px;">
            <option value="en">English</option>
            <option value="fr">French</option>
            <option value="fr-ca">French Canada</option>
            <option value="cs">Czech</option>
            <option value="zh-cn">Chinese</option>
            <option value="nl">Dutch<   /option>
            <option value="ka">Georgian</option>
            <option value="he">Hebrew</option>
            <option value="hi">Hindi</option>
            <option value="id">Indonesian</option>
            <option value="it">Italian</option>
            <option value="jv";Japanese</option>
            <option value="ko";Korean</option>
         </select>
      </div>
      <br/>
      <br/>>
      Display Date is different formats as per locale :<span id="localeid"></span><br/>
      <div>
         <table>
            <tr>
               <th>Format</th>
               <th>Display</th>
            </tr>
            <tr>
               <td><i>dddd, MMMM Do YYYY, h:mm:ss a</i></td>
               <td>
                  <div id="ldate"></div>
               </td>
            </tr>
            <tr>
               <td><i>LLLL</i></td>
               <td>
                  <div id="ldate1"></div>
               </td>
            </tr>
            <tr>
               <td><i>moment().format()</i></td>
               <td>
                  <div id="ldate2"></div>
               </td>
            </tr>
            <tr>
               <td><i>moment().calendar()</i></td>
               <td>
                  <div id="ldate3"></div>
               </td>
            </tr>
            <tr>
               <td><i>Months</i></td>
               <td>
                  <div id="ldate4"></div>
               </td>
            </tr>
            <tr>
               <td><i>Weekdays</i></td>
               <td>
                  <div id="ldate5"></div>
               </td>
            </tr>
         </table>
      </div>
      <script type="text/JavaScript">
         var updatelocale = function() {
            var a = moment.locale(document.getElementById("locale").value);
            var k = moment().format("dddd, MMMM Do YYYY, h:mm:ss a");
            var k1 = moment().format("LLLL");
            var k2 = moment().format();
            var k3 = moment().calendar();
            var k4 = moment.months();
            var k5 = moment.weekdays();
            document.getElementById("localeid").innerHTML = "<b>"+a+"</b>";
            document.getElementById("ldate").innerHTML = k;
            document.getElementById("ldate1").innerHTML = k1;
            document.getElementById("ldate2").innerHTML = k2;
            document.getElementById("ldate3").innerHTML = k3;
            document.getElementById("ldate4").innerHTML = k4;
            document.getElementById("ldate5").innerHTML = k5;
         };
         updatelocale();
      </script>
   </body>
</html>

Sortie 1

Sortie 2

Sortie 3

Sortie 4

↰ Previous page

MomentJS - Guide rapide

traits

Analyse

Validation de la date

Manipulation

Se mettre

Afficher

Requêtes de date

Durées

Internationalisation

Personnalisation

Utilitaires

Plugins

Méthode 1: Utilisation du fichier MomentJS dans le navigateur

Étape 1

Étape 2

Exemple

Production

Production

Méthode 2: Utilisation de Node.js

Méthode 3: Utilisation de Bower

MomentJS et RequireJS

Exemple project.html

main.js

MomentJS et TypeScript

package.json

main.ts

gulpfile.js

Date d'analyse

Analyser les indicateurs

Production

Méthodes pour manipuler la date et l'heure

Méthodes de mise en forme de la date et de l'heure

Méthodes d'interrogation de la date dans MomentJS

Méthodes disponibles avec durées

Plugins de calendrier

Calendrier ISO

Calendrier de Taiwan

Plugins de formats de date

Analyseur de format de date Java

Formateur de date courte

Format de date d'analyse

Format de durée

Plage de dates

Gamme précise

Afficher la plage de dates entre deux dates

Production

Afficher les dimanches entre le 01/05/2014 et le 16/08/2014

Production

Afficher les détails de la date selon les paramètres régionaux

Sortie 1

Sortie 2

Sortie 3

Sortie 4

Tutoriel MomentJS

Ressources utiles MomentJS