MomentJS - Guía rápida

MomentJS es una biblioteca de JavaScript que ayuda a analizar, validar, manipular y mostrar la fecha / hora en JavaScript de una manera muy fácil. Este capítulo proporcionará una descripción general de MomentJS y analiza sus características en detalle.

Moment JS permite mostrar la fecha según la localización y en formato legible por humanos. Puede usar MomentJS dentro de un navegador usando el método de script. También está disponible con Node.js y se puede instalar usando npm.

En MomentJS, puede encontrar muchos métodos fáciles de usar para agregar, restar, validar la fecha, obtener la fecha máxima, mínima, etc. Es un proyecto de código abierto y puede contribuir fácilmente a la biblioteca y agregar características en forma de complementos y que esté disponible en GitHub y en Node.js.

Caracteristicas

Entendamos en detalle todas las funciones importantes disponibles con MomentJS:

Analizando

El análisis le permite analizar la fecha en el formato requerido. El análisis de la fecha está disponible en cadena, objeto y matriz. Te permite clonar el momento usando moment.clone. Hay métodos disponibles que dan la salida de fecha en formato UTC.

Validación de fecha

La validación de fechas es muy fácil con MomentJS. Puedes usar el métodoisValid()y compruebe si la fecha es válida o no. MomentJS también proporciona muchos indicadores de análisis que se pueden usar para verificar la validación de la fecha.

Manipulación

Existen varios métodos para manipular la fecha y la hora en el objeto de momento. add, restar, startoftime, endoftime, local, utc, utcoffset, etc., son los métodos disponibles que brindan los detalles requeridos sobre la fecha / hora en MomentJS.

Obtener / Establecer

Get / Set permite leer y configurar las unidades en la fecha. Permite cambiar y leer horas, minutos, segundos, milisegundos, fecha del mes, día de la semana, día del año, semana del año, mes, año, trimestre, semana del año, semanas del año, get / set, máximo , mínimo, etc. Get / Set es una función muy útil disponible en MomentJS.

Monitor

La pantalla proporciona formatos para mostrar la fecha de diferentes formas. Hay métodos disponibles que indican la hora desde un momento dado, desde el momento actual, la diferencia entre dos momentos, etc. Permite mostrar la fecha en formato JSON, Array, Object, String, etc.

Consultas de fecha

Date Queries tiene métodos fáciles de usar que indican si la fecha es mayor o menor que la entrada, entre las fechas dadas, es un año bisiesto, es un momento, es una fecha, etc. Es muy útil con la validación de fechas.

Duraciones

Las duraciones son una de las características importantes de MomentJS. Básicamente maneja la duración del tiempo para determinadas unidades. loshumanize El método disponible muestra la fecha en un formato legible por humanos.

Internacionalización

La internacionalización es otra característica importante de MomentJS. Puede mostrar la fecha y la hora según la configuración regional. La configuración regional se puede aplicar a un momento específico si es necesario. Obtendrá un archivo minimizado del sitio de inicio de MomentJS que tiene todas las configuraciones regionales. En caso de que esté tratando con una configuración regional específica, también puede agregar solo ese archivo de configuración regional y trabajar con él. Los nombres de meses, semanas y días se muestran en la configuración regional especificada.

Personalización

MomentJS permite la personalización de la configuración regional creada. Puede personalizar los nombres de los meses, la abreviatura de los meses, los nombres de los días de la semana, la abreviatura de los días de la semana, el formato de fecha larga y el formato de calendario para una configuración regional definida según sus requisitos.

Utilidades

Las utilidades vienen con dos métodos: normalize units y invalid. Se utilizan con el momento y nos ayuda a cambiar o personalizar la salida según lo necesitemos. También permite establecer nuestra propia validación personalizada en el objeto de momento.

Complementos

Los complementos son características adicionales de MomentJS. Hay muchos complementos agregados a calendarios, formato de fecha, análisis, rangos de fechas, rango preciso, etc. Puede agregar sus propios complementos y hacerlos disponibles con Node.js y GitHub.

En este capítulo, aprenderá en detalle sobre cómo configurar el entorno de trabajo de MomentJS en su computadora local. Antes de comenzar a trabajar en MomentJS, debe tener acceso a la biblioteca. Puede acceder a sus archivos en cualquiera de los siguientes métodos:

Método 1: uso del archivo MomentJS en el navegador

En este método, necesitaremos el archivo MomentJS de su sitio web oficial y lo usaremos directamente en el navegador.

Paso 1

Como primer paso, vaya al sitio web oficial de MomentJS https://momentjs.comEncontrará la página de inicio como se muestra aquí:

Observe que hay una opción de descarga disponible que le brinda el último archivo MomentJS disponible. Tenga en cuenta que el archivo está disponible con y sin minificación.

Paso 2

Ahora, incluye moment.js dentro de scriptetiqueta y comience a trabajar con MomentJS. Para ello, puede utilizar el código que se proporciona a continuación:

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

A continuación se muestra un ejemplo práctico y su salida para una mejor comprensión:

Ejemplo

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

Salida

los moment-localeEl archivo para trabajar con diferentes configuraciones regionales también está disponible como se muestra en la captura de pantalla anterior. Ahora, agregue el archivo a la etiqueta de secuencia de comandos como se muestra a continuación y trabaje con diferentes configuraciones regionales de su elección. Para ello, puede utilizar el código que se proporciona a continuación:

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

A continuación, se muestra un ejemplo práctico de moment-locale y su salida para una mejor comprensión:

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

Salida

Método 2: usar Node.js

Si opta por este método, asegúrese de tener Node.js y npminstalado en su sistema. Puede usar el siguiente comando para instalar MomentJS:

npm install moment

Puede observar el siguiente resultado una vez que MomentJS se haya instalado correctamente:

Ahora, para probar si MomentJS funciona bien con Node.js, cree el archivo test.js y agréguele el siguiente código:

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

Ahora, en el símbolo del sistema, ejecute el comando node test.js como se muestra en la captura de pantalla que se muestra a continuación:

Tenga en cuenta que este comando muestra el resultado de moment().toString().

Método 3: usar Bower

Bower es otro método para obtener los archivos necesarios para MomentJS. Puede usar el siguiente comando para instalar MomentJS usando Bower -

bower install --save moment

La captura de pantalla que se muestra a continuación muestra la instalación de MomentJS usando Bower -

Estos son los archivos cargados desde Bower para que MomentJS los instale. Los archivos de momento y configuración regional instalados se muestran en la imagen que se muestra a continuación:

En este capítulo, discutiremos cómo trabajar con MomentJS using RequireJS y MomentJS and TypeScript.

MomentJS y RequireJS

Para comprender el funcionamiento de MomentJS usando RequireJS, analicemos un ejemplo de trabajo con MomentJS y RequireJS. La estructura de carpetas de la aplicación correspondiente se muestra en la siguiente imagen:

Puede obtener el archivo require.js obtenido del sitio oficial de RequireJS:https://requirejs.org/docs/download.html. Observe el siguiente código para una mejor comprensión:

Proyecto de ejemplo.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;
});

Tenga en cuenta que Moment.js y momentlocale.js están en la carpeta libs.

La siguiente es la salida para project.html que observarás en el navegador -

MomentJS y TypeScript

El código utilizado para construir MomentJS y el proyecto TypeScript son los siguientes:

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

Tenga en cuenta que las dependencias disponibles en package,json necesita ser instalado usando npm install.

main.ts

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

Necesitas use Gulp para construir el archivo de mecanografiado a JavaScript, es decir, de main.ts a main.js. El siguiente código muestra elgulpfile.js que se usa para construir el archivo. Tenga en cuenta que hemos utilizadogulp-connect paquete que abre un servidor local para mostrar la salida.

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

Esta es la salida que observa cuando ejecuta el código dado anteriormente:

Puede ver la estructura de carpetas como se muestra en el siguiente formato:

El código para index.html se muestra a continuación:

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

Ahora, si abres http://localhost:8080/, puede ver el resultado como se muestra a continuación:

MomentJS tiene muchos métodos fáciles de usar que ayudan a analizar la fecha y la hora. Puede analizar fechas en forma de objeto, cadena, matriz, objeto de fecha nativo de JavaScript, etc. Este capítulo los analiza en detalle.

Fecha de análisis

MomentJS da un objeto contenedor como salida cuando moment()se llama. Puede observar lo siguiente cuando consuela la salida en el navegador.

MomentJS proporciona varios métodos para analizar la fecha como se indica a continuación:

No Señor.	Método y sintaxis
1	Ahora momento()
2	Cuerda momento (cuerda)
3	Objeto momento (objeto)
4	Fecha momento (fecha)
5	Formación momento (Matriz [])
6	Marca de tiempo de Unix momento (número)
7	Clon de momento momento (momento)
8	UTC moment.utc ()
9	parseZone moment.parseZone ()
10	Datos de creación momento (). creationData ();
11	Defaults var m = momento ({hora: 3, minuto: 40, segundos: 10});

MomentJSmaneja la validación de fechas de una manera fácil. No es necesario escribir mucho código para validar la fecha.isValid()es el método disponible en el momento que indica si la fecha es válida o no. MomentJS también proporciona muchos indicadores de análisis que se pueden usar para verificar la validación de la fecha.

Análisis de banderas

MomentJS proporciona las siguientes banderas de análisis en los casos en que la fecha dada se considera inválida:

overflow - Esto ocurrirá cuando el mes dado sea el 13, el día 367 en un año o el 32 en un mes, el 29 de febrero en un año no bisiesto, etc. El desbordamiento contiene el índice de la unidad no válida para igualar hacia invalidAt. Tenga en cuenta que-1 significa que no hay desbordamiento.

invalidMonth- Muestra un nombre de mes no válido. Dará la cadena de mes inválida o nula.

Empty- Cuando se da una entrada que no es una fecha. Da un booleano.

nullInput - Una entrada nula, como moment (nulo); devuelve un booleano.

invalidFormat - Cuando el formato dado está vacío, como moment('2018-04-25', []). Devuelve booleano.

userInvalidated - Una fecha creada explícitamente como inválida, como moment.invalid(). Devuelve booleano.

meridiem- Indica el meridiem (AM / PM) analizado, si lo hay. Devuelve cadena.

parsedDateParts - Devuelve una matriz de partes de fecha analizadas como parsedDateParts[0] como año, parsedDateParts[1] como mes y parsedDateParts[2]como día. Si no hay partes presentes, pero meridiem tiene valor, la fecha no es válida. Devuelve una matriz.

Considere el siguiente ejemplo para comprender la validación de la fecha:

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

Salida

InvalidAt da la salida como 1, lo que apunta al mes, ya que el valor del mes es mayor que 12 y se desborda. Si hay un desbordamiento, invalidAt dará el resultado como se muestra en la tabla que se proporciona aquí:

0	años
1	meses
2	dias
3	horas
4	minutos
5	segundos
6	milisegundos

Si hay varios desbordamientos en la fecha dada, será una salida para el primer índice desbordado.

MomentJS tiene muchos métodos para obtener / establecer las entradas de fecha. Get nos permitirá leer la unidad de entrada requerida y set permitirá modificar la unidad de entrada. Este capítulo analiza en detalle los métodos get / set que se utilizarán en este momento.

La siguiente tabla muestra los métodos get / set disponibles:

Método	Sintaxis
Milisegundo	momento (). milisegundo (número) momento (). milisegundo (); momento (). milisegundos (Número); momento (). milisegundos ();
Segundo	momento (). segundo (Número); momento (). segundo (); momento (). segundos (Número); momento (). segundos ();
Minuto	momento (). minuto (Número); momento (). minuto (); momento (). minutos (Número); momento (). minutos ();
Hora	momento (). fecha (número); momento (). fecha (); momento (). fechas (número); momento (). fechas ();
Día de la semana	momento (). día (Número \| Cadena); momento (). día (); momento (). días (Número \| Cadena); momento (). días ();
Fecha del mes	momento (). fecha (número); momento (). fecha (); momento (). fechas (número); momento (). fechas ();
Día del año	moment (). dayOfYear (Number); moment (). dayOfYear ();
Semana del año	momento (). semana (Número); momento (). semana (); momento (). semanas (Número); momento () .semanas ();
Semana del año (ISO)	momento (). isoWeek (Número); momento (). isoWeek (); momento (). isoWeeks (Número); momento (). isoWeeks ();
Mes	momento (). mes (Número \| Cadena); momento (). mes ();
Trimestre	momento (). cuarto (); momento (). cuarto (Número); momento (). cuartos (); momento (). trimestres (Número);
Año	momento (). año (número); momento (). año ();
Week year	momento (). weekYear (Number); momento (). weekYear ();
Weeks in year	moment (). weeksInYear ();
Obtener	momento (). obtener ('año'); momento (). obtener ('mes'); momento (). obtener ('fecha'); momento (). obtener ('hora'); momento (). obtener ('minuto'); momento (). obtener ('segundo'); momento (). obtener ('milisegundo');
Conjunto	moment (). set (String, Int); moment (). set (Object (String, Int));
Máximo	moment.max (Momento [, Momento ...]); moment.max (Momento []);
Mínimo	moment.min (Momento [, Momento ...]); moment.min (Momento []);

MomentJSproporciona varios métodos para manipular la fecha y la hora en el objeto de momento. Este capítulo trata todos estos métodos en detalle.

Métodos para manipular la fecha y la hora

La siguiente tabla muestra los métodos disponibles en MomentJS que ayudan a manipular la fecha y la hora según sea necesario:

No Señor.	Método y sintaxis
1	Añadir moment.add ()
2	Sustraer moment.subtract ()
3	Inicio del tiempo moment.startof ()
4	Fin del tiempo moment.endof ()
5	Local moment.local ()
6	UTC moment.utc ()
7	Desplazamiento UTC moment.utcOffset ()

MomentJS proporciona formatos para mostrar la fecha de diferentes formas. Hay métodos disponibles que indican la hora desde un momento dado, desde el momento actual, la diferencia entre dos momentos, etc. Puede mostrar la fecha en formato JSON, Array, Object, String, etc.

Métodos para formatear la fecha y la hora

La siguiente tabla muestra una lista de métodos disponibles que ayudan a mostrar / formatear la fecha según sea necesario.

Método	Sintaxis
Formato	momento (). formato (); momento (). formato (Cadena);
Tiempo a partir de ahora	momento (). fromNow (); momento (). fromNow (booleano);
Tiempo desde X	momento (). de (Momento \| Cadena \| Número \| Fecha \| Matriz);
Tiempo para ahora	momento (). toNow (); momento (). toNow (booleano);
Tiempo para X	momento (). a (Momento \| Cadena \| Número \| Fecha \| Matriz); moment (). to (Moment \| String \| Number \| Date \| Array, Boolean);
Hora del calendario	momento (). calendario (); momento (). calendario (tiempo de referencia); momento (). calendario (tiempo de referencia, formatos);
Diferencia	momento (). diff (Momento \| Cadena \| Número \| Fecha \| Matriz); momento (). diff (Momento \| Cadena \| Número \| Fecha \| Matriz, Cadena); moment (). diff (Momento \| Cadena \| Número \| Fecha \| Matriz, Cadena, Booleano);
Marca de tiempo de Unix (milisegundos)	momento (). valueOf (); + momento ();
Marca de tiempo de Unix (segundos)	momento (). unix ();
Días del mes	moment (). daysInMonth ();
Como fecha de JavaScript	momento (). toDate ();
Como matriz	momento (). toArray ();
Como JSON	momento (). toJSON ();
Como cadena ISO 8601	momento (). toISOString (); momento (). toISOString (keepOffset);
Como objeto	momento (). toObject ();
Como cuerda	momento (). toString ();
Inspeccionar	momento (). inspeccionar ();

MomentJS proporciona métodos para consultar la fecha / hora del año bisiesto, comparación de fechas, validación de fechas, etc. Este capítulo los analiza en detalle.

Métodos para consultar la fecha en MomentJS

La siguiente tabla muestra los métodos disponibles en MomentJS y su sintaxis para consultar la fecha:

Método	Sintaxis
Es antes	moment (). isBefore (Momento \| Cadena \| Número \| Fecha \| Matriz); moment (). isBefore (Momento \| Cadena \| Número \| Fecha \| Matriz, Cadena);
Es igual	moment (). isSame (Momento \| Cadena \| Número \| Fecha \| Matriz); moment (). isSame (Momento \| Cadena \| Número \| Fecha \| Matriz, Cadena);
Es despues	moment (). isAfter (Momento \| Cadena \| Número \| Fecha \| Matriz); moment (). isAfter (Momento \| Cadena \| Número \| Fecha \| Matriz, Cadena);
Es igual o anterior	moment (). isSameOrBefore (Momento \| Cadena \| Número \| Fecha \| Matriz); moment (). isSameOrBefore (Momento \| Cadena \| Número \| Fecha \| Matriz, Cadena);
Es igual o posterior	moment (). isSameOrAfter (Momento \| Cadena \| Número \| Fecha \| Matriz); moment (). isSameOrAfter (Momento \| Cadena \| Número \| Fecha \| Matriz, Cadena);
Está entre	moment (). isBetween (como un momento, como un momento); moment (). isBetween (como un momento, como un momento, String);
Es el horario de verano	momento (). isDST ();
Es año bisiesto	momento (). isLeapYear ();
Es un momento	moment.isMoment (obj);
Es una cita	moment.isDate (obj);

La internacionalización es una de las características importantes de MomentJS. Puede mostrar la fecha y la hora según la localización, en otras palabras, según el país / región. La configuración regional se puede aplicar a un momento específico si es necesario.

Este capítulo analiza en detalle cómo hacer que la configuración regional se aplique globalmente, localmente, trabajar con la configuración regional utilizando Node.js, en el navegador, obtener las unidades (meses, días de semana, etc.) en la configuración regional requerida, etc.

No Señor.	Configuración regional y descripción
1	Configuración regional global Podemos asignar la configuración regional globalmente y todos los detalles de fecha / hora estarán disponibles en la configuración regional asignada.
2	Cambiar la configuración regional localmente Necesitamos que la configuración regional se aplique localmente en caso de que necesitemos manejar muchas configuraciones regionales en una aplicación.
3	Uso de la configuración regional en el navegador Podemos empezar a trabajar con la configuración regional al incluir el archivo de configuración regional en la etiqueta del script.
4	Usando Locale usando Node.js Si usa Node.js, ya tendrá los archivos de configuración regional en el momento en que realice la instalación de npm.
5	momentjs_Lista de detalles de fecha / hora de la configuración regional actual Puede configurar la configuración regional y verificar los detalles como meses, días de la semana, etc.
6	Comprobando la configuración regional actual Podemos verificar la configuración regional actual usando moment.locale ().
7	Acceso a la funcionalidad específica de la configuración regional Aquí verá los métodos y propiedades disponibles en la configuración regional cargada actualmente.

MomentJSpermite agregar personalización a la configuración regional creada. Este capítulo los analiza en detalle.

La siguiente lista muestra las personalizaciones posibles en la localización:

No Señor.	Localización y descripción
1	Nombres de meses Puede agregar nombres de meses a la personalización de la configuración regional.
2	Abreviatura del mes Este método ayuda a personalizar las abreviaturas de los meses.
3	Nombres de días de la semana Este método ayuda a personalizar los nombres de los días de la semana según la configuración regional.
4	Abreviatura del día de la semana Este método ayuda a personalizar las abreviaturas de los días de la semana según la configuración regional.
5	Abreviatura mínima del día de la semana Este método ayuda a personalizar las abreviaturas mínimas de los días de la semana según la configuración regional.
6	Formatos de fecha larga Este método ayuda a personalizar el formato de fecha larga para una configuración regional.
7	Tiempo relativo Este método ayuda a obtener el tiempo relativo.
8	AM PM Este método ayuda a personalizar el meridiem según la ubicación.
9	Análisis AM / PM Puede analizar AM / PM utilizando este método.
10	Calendario Esto ayuda a personalizar el objeto de calendario para un conjunto de configuraciones regionales.
11	Ordinal La visualización ordinal de las fechas se puede cambiar según la configuración regional.
12	Umbrales de tiempo relativo Esto se usa con duration.humanize donde la longitud de la duración se muestra como un few seconds ago, in a minute, an hour ago etc.

MomentJS proporciona una característica importante llamada duraciones que maneja el tiempo para unidades dadas. En este capítulo, aprenderá esto en detalle.

Métodos disponibles con duraciones

La siguiente tabla muestra los métodos disponibles con duración para diferentes unidades que se utilizarán con duración de momento:

Método	Sintaxis
Creando	moment.duration (Número, Cadena); moment.duration (Número); moment.duration (Objeto); moment.duration (String);
Clon	moment.duration (). clone ();
Humanizar	momento.duración (). humanizar ();
Milisegundos	moment.duration (). milisegundos (); moment.duration (). asMilliseconds ();
Segundos	momento.duración (). segundos (); moment.duration (). asSeconds ();
Minutos	moment.duration (). minutes (); moment.duration (). asMinutes ();
Horas	momento.duración (). horas (); moment.duration (). asHours ();
Dias	moment.duration (). days (); moment.duration (). asDays ();
Semanas	momento.duración (). semanas (); moment.duration (). asWeeks ();
Meses	momento.duración (). meses (); moment.duration (). asMonths ();
Years	momento.duración (). años (); moment.duration (). asYears ();
Agregar tiempo	moment.duration (). add (Número, Cadena); moment.duration (). add (Número); moment.duration (). add (Duración); moment.duration (). add (Objeto);
Restar tiempo	moment.duration (). restar (Número, Cadena); moment.duration (). restar (Número); moment.duration (). restar (Duración); moment.duration (). restar (Objeto);
Usar duración con diferencia	var duración = momento.duración (x.diff (y))
Como unidad de tiempo	moment.duration (). as (String);
Obtener unidad de tiempo	duration.get ('horas'); duration.get ('minutos'); duration.get ('segundos'); duration.get ('milisegundos');
Como JSON	moment.duration (). toJSON ();
Es una duración	moment.isDuration (obj);
Como cadena ISO 8601	moment.duration (). toISOString ();
Lugar	moment.duration (). locale (); moment.duration (). locale (String);

En MomentJS, puede cambiar o personalizar la salida según el requisito utilizando unidades de normalización y métodos no válidos. También puede configurar su propia validación personalizada en el objeto de momento.

Observe la siguiente tabla para obtener más información:

No Señor.	Método y sintaxis
1	Normalizar unidades moment.normalizeUnits (String);
2	Inválido moment.invalid (Objeto);

Los complementos son características extendidas agregadas en MomentJS. MomentJS es un proyecto de código abierto y muchos complementos se encuentran en MomentJS que son aportados por sus usuarios y están disponibles usando Node.js y GitHub.

Este capítulo analiza algunos de los complementos de calendarios y los complementos de formatos de fecha disponibles en MomentJS.

Complementos de calendario

En esta sección se analizan dos tipos de complementos de Calendario: ISO calendar and Taiwan calendar.

Calendario ISO

Puede usar el siguiente comando para instalarlo con Node.js:

npm install moment-isocalendar

Puede obtener moment-isocalendar.js de GitHub - https://github.com/fusionbox/moment-isocalendar Observe el siguiente ejemplo de trabajo con isocalendar y MomentJS:

Example

var m = moment().isocalendar();

Output

Example

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

Output

Calendario de Taiwán

Puede usar el siguiente comando para instalarlo con Node.js:

npm install moment-jalaali

Puede obtener el moment-taiwan.js de GitHub - https://github.com/bradwoo8621/moment-taiwan Observe el siguiente ejemplo de trabajo con isocalendar y MomentJS:

Example

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

Output

Complementos de formatos de fecha

En esta sección se analizan los siguientes tipos de complementos de formato de fecha:

Analizador de formato de fecha de Java
Formateador de fecha corta
Parse formato de fecha
Formato de duración
Rango de fechas
Rango preciso

Analizador Java DateFormat

Puede usar el siguiente comando para instalarlo con Node.js:

Puede obtener el moment-jdateformatparser.js de GitHub - https://github.com/MadMG/moment-jdateformatparser Observe el siguiente ejemplo de trabajo para moment-jdateformatparser y MomentJS -

Example

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

Output

Formateador de fecha corta

El archivo JavaScript para formato de fecha corta se puede obtener de GitHub:

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

Syntax

moment().short();

La pantalla se ve como se muestra en la tabla aquí -

Desde el momento	Desde el momento (). Corto ()
0 a 59 segundos	0 a 59 s
1 a 59 minutos	1 hasta 59 m
1 a 23 horas	1h a 23h
1 a 6 días	1d a 6d
> = 7 días y el mismo año	La pantalla será como 3 de febrero, 6 de marzo
> = 7 días y año diferencial	La pantalla será como 3 de febrero de 2018, 6 de marzo de 2018

Puede tomar el script por un momento del enlace de GitHub que se muestra arriba.

Example

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

Output

Si quieres eliminar el sufijo ago o in, puede pasar de verdadero a corto (tru.

Parse formato de fecha

Puede usar el siguiente comando para instalarlo con Node.js:

npm install moment-parseformat

Example

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

Output

Observe que la salida muestra que cualquier parámetro (fecha / hora) que se le dé al parseFormat, da el formato de la fecha como se muestra arriba.

Formato de duración

Puede usar el siguiente comando para instalar el formato de duración en Node.js:

El repositorio para el formato de duración está disponible aquí: https://github.com/jsmreese/moment-duration-format Veamos un ejemplo de trabajo con formato de duración:

Example

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

Output

Esto agrega más detalles a la duración del momento creado.

Rango de fechas

Puede usar el siguiente comando para instalar el rango de fechas en 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

Rango preciso

El rango preciso mostrará la diferencia de fecha exacta en fecha, hora y en formato legible por humanos. Puede usar el siguiente comando para instalar un rango preciso en 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

Hasta ahora, hemos aprendido muchos conceptos en MomentJS. Este capítulo le ofrece más ejemplos para una mejor comprensión.

Mostrar intervalo de fechas entre dos fechas

Este es un ejemplo que muestra las fechas entre dos fechas determinadas.

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

Queremos mostrar todas las fechas entre 2014-05-01 a 2014-05-16. Hemos utilizado la consulta de fechaisSameOrAfter, date addition and date format para lograr lo que queremos.

Salida

Mostrar domingos entre 2014-05-01 y 2014-08-16

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

Salida

Mostrar detalles de fecha según la configuración regional

Aquí estamos usando el script moment.locale que tiene todas las configuraciones regionales.

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

Salida 1

Salida 2

Salida 3

Salida 4

↰ Previous page