MomentJS - Guida rapida

MomentJS è una libreria JavaScript che aiuta ad analizzare, convalidare, manipolare e visualizzare data / ora in JavaScript in un modo molto semplice. Questo capitolo fornirà una panoramica di MomentJS e discuterà le sue caratteristiche in dettaglio.

Moment JS consente la visualizzazione della data secondo la localizzazione e in un formato leggibile dall'uomo. Puoi utilizzare MomentJS all'interno di un browser utilizzando il metodo di script. È anche disponibile con Node.js e può essere installato utilizzando npm.

In MomentJS, puoi trovare molti metodi facili da usare per aggiungere, sottrarre, convalidare la data, ottenere la data massima, minima ecc. È un progetto open source e puoi facilmente contribuire alla libreria e aggiungere funzionalità sotto forma di plugin e renderlo disponibile su GitHub e in Node.js.

Caratteristiche

Cerchiamo di capire in dettaglio tutte le funzionalità importanti disponibili con MomentJS -

Analisi

L'analisi consente di analizzare la data nel formato richiesto. L'analisi della data è disponibile in stringa, oggetto e matrice. Ti permette di clonare il momento usando moment.clone. Sono disponibili metodi che forniscono l'output della data in formato UTC.

Convalida della data

La convalida della data è molto semplice con MomentJS. Puoi usare il metodoisValid()e controlla se la data è valida o meno. MomentJS fornisce anche molti flag di analisi che possono essere utilizzati per verificare la convalida della data.

Manipolazione

Esistono vari metodi per manipolare la data e l'ora sull'oggetto momento. add, subtract, startoftime, endoftime, local, utc, utcoffset ecc. sono i metodi disponibili che forniscono i dettagli richiesti su data / ora in MomentJS.

Preparatevi

Get / Set permette di leggere e impostare le unità nella data. Consente di modificare e leggere ora, minuti, secondi, millisecondi, data del mese, giorno della settimana, giorno dell'anno, settimana dell'anno, mese, anno, trimestre, anno della settimana, settimane dell'anno, get / set, maximum , minimo ecc. Get / Set è una funzione molto utile disponibile in MomentJS.

Schermo

Il display fornisce formati per visualizzare la data in modi diversi. Sono disponibili metodi che indicano l'ora di un dato momento, del momento corrente, la differenza tra due momenti ecc. Consente di visualizzare la data in formato JSON, Array, Object, String ecc.

Query sulla data

Date Queries ha metodi facili da usare che dicono se la data è maggiore o minore dell'input, tra le date fornite, è un anno bisestile, è un momento, è una data ecc. È molto utile con la convalida della data.

Durate

La durata è una delle caratteristiche importanti di MomentJS. Fondamentalmente gestisce la durata del tempo per determinate unità. Ilhumanize metodo disponibile visualizza la data in un formato leggibile dall'uomo.

Internazionalizzazione

L'internazionalizzazione è un'altra caratteristica importante di MomentJS. È possibile visualizzare la data e l'ora in base alle impostazioni locali. La locale può essere applicata a un momento specifico, se necessario. Otterrai un file minimizzato dal sito principale di MomentJS che ha tutte le impostazioni locali. Nel caso tu abbia a che fare con una specifica locale, puoi anche aggiungere solo quel file locale e lavorarci. I nomi di mesi, settimane e giorni vengono visualizzati nella lingua specificata.

Personalizzazione

MomentJS consente la personalizzazione della locale creata. È possibile personalizzare i nomi dei mesi, l'abbreviazione del mese, i nomi dei giorni feriali, l'abbreviazione dei giorni feriali, il formato della data estesa e il formato del calendario per una lingua definita in base alle proprie esigenze.

Utilità

Le utility vengono fornite con due metodi: normalize units e invalid. Sono usati con il momento e ci aiutano a cambiare o personalizzare l'output di cui abbiamo bisogno. Consente inoltre di impostare la nostra validazione personalizzata sull'oggetto momento.

Plugin

I plugin sono funzionalità aggiuntive di MomentJS. Ci sono molti plugin aggiunti ai calendari, formato della data, analisi, intervalli di date, intervallo preciso ecc. Puoi aggiungere i tuoi plugin e renderli disponibili con Node.js e GitHub.

In questo capitolo imparerai in dettaglio come configurare l'ambiente di lavoro di MomentJS sul tuo computer locale. Prima di iniziare a lavorare su MomentJS, devi avere accesso alla libreria. È possibile accedere ai suoi file in uno dei seguenti metodi:

Metodo 1: utilizzo del file MomentJS nel browser

In questo metodo, avremo bisogno del file MomentJS dal suo sito Web ufficiale e lo utilizzeremo direttamente nel browser.

Passo 1

Come primo passo, vai al sito ufficiale di MomentJS https://momentjs.comTroverai la home page come mostrato qui -

Osserva che è disponibile un'opzione di download che ti dà l'ultimo file MomentJS disponibile. Notare che il file è disponibile con e senza minimizzazione.

Passo 2

Ora includi moment.js dentro il scripttag e inizia a lavorare con MomentJS. Per questo, puoi utilizzare il codice fornito di seguito:

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

Qui viene fornito un esempio funzionante e il suo output per una migliore comprensione -

Esempio

<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>

Produzione

Il moment-localeè disponibile anche un file per lavorare con diverse localizzazioni, come mostrato nello screenshot qui sopra. Ora aggiungi il file al tag script come mostrato di seguito e lavora con diverse impostazioni locali di tua scelta. Per questo, puoi utilizzare il codice fornito di seguito:

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

Qui viene fornito un esempio funzionante per moment-locale e il suo output per una migliore comprensione -

<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>

Produzione

Metodo 2: utilizzo di Node.js

Se stai optando per questo metodo, assicurati di averlo fatto Node.js e npminstallato sul tuo sistema. È possibile utilizzare il seguente comando per installare MomentJS:

npm install moment

È possibile osservare il seguente output una volta installato correttamente MomentJS:

Ora, per verificare se MomentJS funziona bene con Node.js, crea il file test.js e aggiungi il seguente codice ad esso -

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

Ora, nel prompt dei comandi, esegui il nodo di comando test.js come mostrato nello screenshot riportato di seguito -

Notare che questo comando visualizza l'output per moment().toString().

Metodo 3: utilizzo di Bower

Bower è un altro metodo per ottenere i file richiesti per MomentJS. È possibile utilizzare il seguente comando per installare MomentJS utilizzando Bower -

bower install --save moment

Lo screenshot riportato di seguito mostra l'installazione di MomentJS utilizzando Bower -

Questi sono i file caricati da Bower per MomentJS da installare. Il momento installato ei file delle impostazioni locali sono mostrati nell'immagine riportata di seguito:

In questo capitolo, discuteremo come lavorare con MomentJS using RequireJS e MomentJS and TypeScript.

MomentJS e RequireJS

Per comprendere il funzionamento di MomentJS utilizzando RequireJS, analizziamo un esempio di lavoro con MomentJS e RequireJS. La struttura delle cartelle dell'app corrispondente è mostrata nell'immagine seguente:

È possibile ottenere il file require.js recuperato dal sito ufficiale di RequireJS -https://requirejs.org/docs/download.html. Osservare il codice seguente per una migliore comprensione:

Esempio 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;
});

Nota che Moment.js e momentlocale.js sono nella cartella libs.

Di seguito è riportato l'output per project.html che osserverai nel browser -

MomentJS e TypeScript

Il codice utilizzato per costruire MomentJS e il progetto Typescript è il seguente:

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"
}

Tieni presente che le dipendenze disponibili in package,json deve essere installato utilizzando npm install.

main.ts

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

Devi use Gulp per costruire il file da dattiloscritto a JavaScript, cioè da main.ts per main.js. Il codice seguente mostra ilgulpfile.js che viene utilizzato per creare il file. Nota che abbiamo usatogulp-connect pacchetto che apre un server locale per visualizzare l'output.

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
   });
});

Questo è l'output che osservi quando esegui il codice sopra indicato -

È possibile visualizzare la struttura delle cartelle come mostrato nel seguente formato:

Il codice per index.html è mostrato di seguito:

<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>

Ora, se apri http://localhost:8080/, puoi vedere l'output come mostrato di seguito -

MomentJS ha molti metodi facili da usare che aiutano nell'analisi di data e ora. Può analizzare le date sotto forma di oggetto, stringa, array, oggetto data nativo di JavaScript, ecc. Questo capitolo le discute in dettaglio.

Data di analisi

MomentJS fornisce l'oggetto wrapper come output quando moment()è chiamato. È possibile osservare quanto segue quando si consola l'output nel browser.

MomentJS fornisce vari metodi per analizzare la data come elencato di seguito:

Sr.No.	Metodo e sintassi
1	Adesso momento()
2	Corda momento (stringa)
3	Oggetto momento (oggetto)
4	Data momento (data)
5	Vettore momento (Array [])
6	Timestamp Unix momento (numero)
7	Moment Clone momento (Momento)
8	UTC moment.utc ()
9	parseZone moment.parseZone ()
10	Dati di creazione moment (). creationData ();
11	Default var m = momento ({ora: 3, minuto: 40, secondi: 10});

MomentJSgestisce la convalida della data in modo semplice. Non è necessario scrivere molto codice per convalidare la data.isValid()è il metodo disponibile al momento che dice se la data è valida o meno. MomentJS fornisce anche molti flag di analisi che possono essere utilizzati per verificare la convalida della data.

Bandiere di analisi

MomentJS fornisce i seguenti flag di analisi nei casi in cui la data fornita è considerata non valida:

overflow - Ciò si verificherà quando il mese indicato è il 13 °, il giorno è il 367 ° in un anno o il 32 ° in un mese, il 29 per febbraio in un anno non bisestile ecc. Overflow contiene l'indice dell'unità non valida a cui corrispondere invalidAt. Nota che-1 significa nessun trabocco.

invalidMonth- Mostra un nome di mese non valido. Fornirà la stringa del mese non valida o null.

Empty- Quando viene fornito un input che non è una data. Fornisce un valore booleano.

nullInput - Un input nullo, come moment (null); restituisce un valore booleano.

invalidFormat - Quando il formato fornito è vuoto come moment('2018-04-25', []). Restituisce Boolean.

userInvalidated - Una data creata esplicitamente come non valida, ad esempio moment.invalid(). Restituisce booleano.

meridiem- Indica il meridiano (AM / PM) analizzato, se presente. Restituisce stringa.

parsedDateParts - Restituisce un array di parti di date analizzate come parsedDateParts[0] come anno, parsedDateParts[1] come mese e parsedDateParts[2]come il giorno. Se non sono presenti parti, ma meridiem ha valore, la data non è valida. Restituisce un array.

Considera il seguente esempio per comprendere la convalida della data:

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

Produzione

InvalidAt fornisce l'output come 1, che punta al mese poiché il valore del mese è maggiore di 12 ed è in overflow. Se c'è un overflow, invalidAt darà l'output come mostrato nella tabella qui riportata -

0	anni
1	mesi
2	giorni
3	ore
4	minuti
5	secondi
6	millisecondi

Se sono presenti più overflow nella data specificata, sarà un output per il primo indice in overflow.

MomentJS ha molti metodi per ottenere / impostare gli input di data. Get ci permetterà di leggere l'unità di input richiesta e set ci permetterà di modificare l'unità di input. Questo capitolo discute in dettaglio i metodi get / set da utilizzare al momento.

La tabella seguente mostra i metodi get / set disponibili:

Metodo	Sintassi
Millisecondo	moment (). millisecond (Number) momento (). millisecondo (); moment (). milliseconds (Number); momento (). millisecondi ();
Secondo	momento (). secondo (Numero); momento (). secondo (); moment (). seconds (Number); momento (). secondi ();
Minuto	moment (). minute (Number); momento (). minuto (); momento (). minuti (Numero); momento (). minuti ();
Ora	moment (). date (Number); moment (). date (); moment (). date (numero); moment (). date ();
Giorno della settimana	moment (). day (Number | String); momento (). giorno (); moment (). days (Number | String); momento (). giorni ();
Data del mese	moment (). date (Number); moment (). date (); moment (). date (numero); moment (). date ();
Giorno dell'anno	moment (). dayOfYear (Number); moment (). dayOfYear ();
Settimana dell'anno	momento (). settimana (Numero); momento (). settimana (); momento (). settimane (numero); momento (). settimane ();
Settimana dell'anno (ISO)	moment (). isoWeek (Number); moment (). isoWeek (); moment (). isoWeeks (Number); moment (). isoWeeks ();
Mese	moment (). month (Number | String); momento (). mese ();
Trimestre	momento (). trimestre (); momento (). trimestre (Numero); momento (). quarti (); momento (). trimestri (Numero);
Anno	moment (). year (Number); momento (). anno ();
Week year	moment (). weekYear (Number); moment (). weekYear ();
Weeks in year	moment (). weeksInYear ();
Ottenere	moment (). get ('anno'); moment (). get ('mese'); moment (). get ('data'); moment (). get ('ora'); moment (). get ('minuto'); moment (). get ('second'); moment (). get ('millisecondo');
Impostato	moment (). set (String, Int); moment (). set (Object (String, Int));
Massimo	moment.max (Moment [, Moment ...]); moment.max (Moment []);
Minimo	moment.min (Moment [, Moment ...]); moment.min (Moment []);

MomentJSfornisce vari metodi per manipolare la data e l'ora sull'oggetto momento. Questo capitolo tratta tutti questi metodi in dettaglio.

Metodi per manipolare data e ora

La tabella seguente mostra i metodi disponibili in MomentJS che aiuta a manipolare la data e l'ora come richiesto -

Sr.No.	Metodo e sintassi
1	Inserisci moment.add ()
2	Sottrarre moment.subtract ()
3	Inizio del tempo moment.startof ()
4	Fine dei tempi moment.endof ()
5	Locale moment.local ()
6	UTC moment.utc ()
7	Offset UTC moment.utcOffset ()

MomentJS fornisce formati per visualizzare la data in modi diversi. Sono disponibili metodi che indicano l'ora di un dato momento, del momento corrente, la differenza tra due momenti ecc. Può visualizzare la data in formato JSON, Array, Object, String ecc.

Metodi per formattare data e ora

La tabella seguente mostra un elenco di metodi disponibili che aiuta nella visualizzazione / formattazione della data come richiesto.

Metodo	Sintassi
Formato	moment (). format (); moment (). format (String);
Tempo da adesso	moment (). fromNow (); moment (). fromNow (Boolean);
Tempo da X	moment (). from (Moment | String | Number | Date | Array);
È ora di adesso	moment (). toNow (); moment (). toNow (Boolean);
È ora di X	moment (). to (Moment | String | Number | Date | Array); moment (). to (Moment | String | Number | Date | Array, Boolean);
Ora del calendario	moment (). calendar (); moment (). calendar (referenceTime); moment (). calendar (referenceTime, formati);
Differenza	moment (). diff (Moment | String | Number | Date | Array); moment (). diff (Moment | String | Number | Date | Array, String); moment (). diff (Moment | String | Number | Date | Array, String, Boolean);
Timestamp Unix (millisecondi)	moment (). valueOf (); + momento ();
Timestamp Unix (secondi)	momento (). unix ();
Giorni nel mese	moment (). daysInMonth ();
Come data JavaScript	moment (). toDate ();
Come Array	moment (). toArray ();
Come JSON	momento (). toJSON ();
Come stringa ISO 8601	moment (). toISOString (); moment (). toISOString (keepOffset);
As Object	moment (). toObject ();
As String	moment (). toString ();
Ispezionare	moment (). inspect ();

MomentJS fornisce metodi per interrogare la data / ora per l'anno bisestile, il confronto della data, la convalida della data, ecc. Questo capitolo li discute in dettaglio.

Metodi per l'interrogazione della data in MomentJS

La tabella seguente mostra i metodi disponibili in MomentJS e la loro sintassi per l'interrogazione della data -

Metodo	Sintassi
È prima	moment (). isBefore (Moment | String | Number | Date | Array); moment (). isBefore (Moment | String | Number | Date | Array, String);
È lo stesso	moment (). isSame (Moment | String | Number | Date | Array); moment (). isSame (Moment | String | Number | Date | Array, String);
È dopo	moment (). isAfter (Moment | String | Number | Date | Array); moment (). isAfter (Moment | String | Number | Date | Array, String);
È uguale o prima	moment (). isSameOrBefore (Moment | String | Number | Date | Array); moment (). isSameOrBefore (Moment | String | Number | Date | Array, String);
È uguale o dopo	moment (). isSameOrAfter (Moment | String | Number | Date | Array); moment (). isSameOrAfter (Moment | String | Number | Date | Array, String);
È tra	moment (). isBetween (moment-like, moment-like); moment (). isBetween (moment-like, moment-like, String);
È l'ora legale	moment (). isDST ();
È l'anno bisestile	moment (). isLeapYear ();
È un momento	moment.isMoment (obj);
È un appuntamento	moment.isDate (obj);

L'internazionalizzazione è una delle caratteristiche importanti di MomentJS. È possibile visualizzare la data e l'ora in base alla localizzazione, in altre parole, in base al paese / regione. La locale può essere applicata a un momento specifico, se necessario.

Questo capitolo discute in dettaglio su come applicare le impostazioni locali a livello globale, locale, lavorare con le impostazioni locali utilizzando Node.js, nel browser, ottenere le unità (mesi, giorni feriali ecc.) Nella locale richiesta ecc.

Sr.No.	Locale e descrizione
1	Localizzazione globale Possiamo assegnare la locale a livello globale e tutti i dettagli di data / ora saranno disponibili nella locale assegnata.
2	Modifica locale a livello locale È necessario che le impostazioni locali vengano applicate localmente nel caso in cui sia necessario gestire molte impostazioni locali in un'applicazione.
3	Utilizzo delle impostazioni locali nel browser Possiamo iniziare a lavorare con locale includendo il file locale nel tag script.
4	Utilizzo delle impostazioni locali utilizzando Node.js Se ti capita di utilizzare Node.js, avrai i file di locale già nel momento in cui esegui l'installazione di npm.
5	momentjs_Listing dettagli data / ora della locale corrente Puoi impostare le impostazioni internazionali e controllare i dettagli come mesi, giorni feriali ecc.
6	Controllo della localizzazione corrente Possiamo controllare la localizzazione corrente usando moment.locale ().
7	Accesso alle funzionalità specifiche delle impostazioni locali Qui vedranno i metodi e le proprietà disponibili nella locale attualmente caricata.

MomentJSpermette di aggiungere la personalizzazione al locale creato. Questo capitolo li discute in dettaglio.

Il seguente elenco mostra le personalizzazioni possibili sulla localizzazione:

Sr.No.	Localizzazione e descrizione
1	Nomi dei mesi È possibile aggiungere nomi di mesi alla personalizzazione delle impostazioni locali.
2	Abbreviazione del mese Questo metodo aiuta a personalizzare le abbreviazioni dei mesi.
3	Nomi dei giorni feriali Questo metodo aiuta a personalizzare i nomi dei giorni feriali secondo le impostazioni locali.
4	Abbreviazione dei giorni feriali Questo metodo aiuta a personalizzare le abbreviazioni dei giorni feriali in base alle impostazioni locali.
5	Abbreviazione minima del giorno della settimana Questo metodo aiuta a personalizzare le abbreviazioni dei giorni feriali minimi in base alle impostazioni locali.
6	Formati di data lunga Questo metodo aiuta a personalizzare il formato longdate per una locale.
7	Tempo relativo Questo metodo aiuta a ottenere il tempo relativo.
8	AM PM Questo metodo aiuta a personalizzare il meridiem secondo le impostazioni locali.
9	Analisi AM / PM È possibile analizzare AM / PM utilizzando questo metodo.
10	Calendario Ciò aiuta a personalizzare l'oggetto calendario per un set di impostazioni locali.
11	Ordinale La visualizzazione ordinale delle date può essere modificata in base alle impostazioni locali.
12	Soglie di tempo relativo Viene utilizzato con duration.humanize dove la durata è visualizzata come un file few seconds ago, in a minute, an hour ago eccetera.

MomentJS fornisce un'importante funzionalità chiamata durate che gestisce il periodo di tempo per determinate unità. In questo capitolo lo imparerai in dettaglio.

Metodi disponibili con durate

La tabella seguente mostra i metodi disponibili con durata per diverse unità da utilizzare con durata momento -

Metodo	Sintassi
Creazione	moment.duration (numero, stringa); moment.duration (Numero); moment.duration (Oggetto); moment.duration (String);
Clone	moment.duration (). clone ();
Umanizzare	moment.duration (). humanize ();
Millisecondi	moment.duration (). millisecondi (); moment.duration (). asMilliseconds ();
Secondi	moment.duration (). seconds (); moment.duration (). asSeconds ();
Minuti	moment.duration (). minutes (); moment.duration (). asMinutes ();
Ore	moment.duration (). ore (); moment.duration (). asHours ();
Giorni	moment.duration (). giorni (); moment.duration (). asDays ();
Settimane	moment.duration (). settimane (); moment.duration (). asWeeks ();
Mesi	moment.duration (). months (); moment.duration (). asMonths ();
Years	moment.duration (). years (); moment.duration (). asYears ();
Aggiungi tempo	moment.duration (). add (Number, String); moment.duration (). add (Numero); moment.duration (). add (Durata); moment.duration (). add (Object);
Sottrai tempo	moment.duration (). subtract (Number, String); moment.duration (). subtract (Number); moment.duration (). subtract (durata); moment.duration (). subtract (Object);
Utilizzo della durata con diff	var duration = moment.duration (x.diff (y))
Come unità di tempo	moment.duration (). as (String);
Ottieni unità di tempo	duration.get ('ore'); duration.get ('minutes'); duration.get ('secondi'); duration.get ('millisecondi');
Come JSON	moment.duration (). toJSON ();
È una durata	moment.isDuration (obj);
Come stringa ISO 8601	moment.duration (). toISOString ();
Locale	moment.duration (). locale (); moment.duration (). locale (String);

In MomentJS, è possibile modificare o personalizzare l'output secondo il requisito utilizzando unità di normalizzazione e metodi non validi. Puoi anche impostare la tua convalida personalizzata sull'oggetto momento.

Per ulteriori informazioni, osservare la tabella seguente:

Sr.No.	Metodo e sintassi
1	Normalizza unità moment.normalizeUnits (String);
2	Non valido moment.invalid (Object);

I plugin sono funzionalità estese aggiunte su MomentJS. MomentJS è un progetto open source e molti plugin si trovano in MomentJS che sono forniti dai suoi utenti e disponibili utilizzando Node.js e GitHub.

Questo capitolo discute alcuni dei plugin dei calendari e dei formati di data disponibili in MomentJS.

Plugin del calendario

In questa sezione vengono descritti due tipi di plug-in di Calendar: ISO calendar and Taiwan calendar.

Calendario ISO

È possibile utilizzare il seguente comando per installarlo con Node.js:

npm install moment-isocalendar

Puoi ottenere il momento-isocalendar.js da GitHub - https://github.com/fusionbox/moment-isocalendar Osservare il seguente esempio di lavoro con isocalendar e MomentJS -

Example

var m = moment().isocalendar();

Output

Example

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

Output

Calendario di Taiwan

È possibile utilizzare il seguente comando per installarlo con Node.js:

npm install moment-jalaali

Puoi ottenere il momento-taiwan.js da GitHub - https://github.com/bradwoo8621/moment-taiwan Osservare il seguente esempio di lavoro con isocalendar e MomentJS -

Example

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

Output

Plugin formati data

Questa sezione tratta i seguenti tipi di plugin per il formato della data:

• Analizzatore Java dateformat
• Formattatore data breve
• Formato data di analisi
• Formato durata
• Intervallo di date
• Gamma precisa

Parser Java DateFormat

È possibile utilizzare il seguente comando per installarlo con Node.js:

Puoi ottenere il momento-jdateformatparser.js da GitHub - https://github.com/MadMG/moment-jdateformatparser Osservare il seguente esempio di lavoro per moment-jdateformatparser e MomentJS -

Example

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

Output

Formattatore data breve

Il file JavaScript per shortdateformat può essere recuperato da GitHub -

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

Syntax

moment().short();

Il display ha l'aspetto mostrato nella tabella qui -

Dal momento	Dal momento (). Short ()
Da 0 a 59 secondi	Da 0 a 59 s
Da 1 a 59 minuti	Da 1 a 59 m
Da 1 a 23 ore	Da 1 ora a 23 ore
Da 1 a 6 giorni	Da 1d a 6d
> = 7 giorni e stesso anno	Il display sarà come il 3 febbraio, 6 marzo
> = 7 giorni e diff anno	Il display sarà come il 3 febbraio 2018, 6 marzo 2018

Puoi prendere lo script per un attimo dal link GitHub indicato sopra.

Example

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

Output

Se vuoi rimuovere il suffisso ago o in, puoi passare da true a short (tru.

Formato data di analisi

È possibile utilizzare il seguente comando per installarlo con Node.js:

npm install moment-parseformat

Example

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

Output

Si noti che l'output mostra che qualunque parametro (data / ora) è dato a parseFormat, fornisce il formato della data come mostrato sopra.

Formato durata

È possibile utilizzare il seguente comando per installare il formato di durata su Node.js:

Il repository per il formato della durata è disponibile qui - https://github.com/jsmreese/moment-duration-format Vediamo un esempio funzionante con il formato della durata:

Example

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

Output

Questo aggiunge ulteriori dettagli alla durata nel momento creato.

Intervallo di date

È possibile utilizzare il seguente comando per installare l'intervallo di date su 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

Gamma precisa

L'intervallo preciso visualizzerà la differenza di data esatta in data, ora e in formato leggibile dall'uomo. È possibile utilizzare il seguente comando per installare un intervallo preciso su 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

Fino ad ora, abbiamo imparato molti concetti in MomentJS. Questo capitolo fornisce ulteriori esempi per una migliore comprensione.

Visualizza l'intervallo di date tra due date

Questo è un esempio che mostra le date tra due date date.

<!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>

Vogliamo visualizzare tutte le date tra 2014-05-01 per 2014-05-16. Abbiamo utilizzato la query della dataisSameOrAfter, date addition and date format per ottenere ciò che vogliamo.

Produzione

Mostra le domeniche tra il 01/05/2014 e il 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>

Produzione

Visualizza i dettagli della data in base alle impostazioni internazionali

Qui stiamo usando lo script moment.locale che ha tutte le localizzazioni.

<!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>

Uscita 1

Uscita 2

Uscita 3

Uscita 4