Uso de Moment.js

Cómo utilizar Moment.js

Moment fue diseñado para funcionar tanto en el navegador como en Node.js.

¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.

Todo el código debería funcionar en ambos entornos y todas las pruebas unitarias se ejecutan en ambos entornos.

Moment.js

Actualmente, se utilizan los siguientes navegadores para el sistema CI: Chrome en Windows XP, IE 8, 9 y 10 en Windows 7, IE 11 en Windows 10, Firefox más reciente en Linux y Safari más reciente en OSX 10.8 y 10.11.

Si deseas probar los códigos de muestra a continuación, simplemente abre la consola de tu navegador e ingréselo.

Instalar Moment en Node.js

Puedes instalar Moment.js en tu proyecto Node.js ejecutando el siguiente comando:

Terminal (Instalación con NPM)
npm install moment

Posteriormente en los archivos que necesites utilizar Moment.js puedes hacerlo con estas líneas de código JavaScript:

JavaScript
var moment = require('moment'); // require
moment().format(); 

O bien en la sintaxis de ES6:

JavaScript
import moment from 'moment';
moment().format();

Nota: En 2.4.0, el objeto Moment exportado globalmente estaba obsoleto. Se eliminará en la próxima versión principal.

Si también deseas incluir Moment Timezone, consulta la documentación separada de Moment Timezone para Node.js con ejemplos.

Moment en el Navegador web

Si tu preferencia es utilizar Moment.js directamente en el navegador web, puedes hacerlo añadiendo el paquete moment.js previamente descargado o bien utilizando uno de los CDNs disponibles:

¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.
HTML
<script src="moment.js"></script>
<script>
	moment().format();
</script>

Moment.js está disponible en cdnjs.com y en jsDelivr.

Instalar Moment con Bower

Otra opción disponible es Bower. Puedes instalar Moment.js en tu proyecto utilizando Bower de la siguiente manera:

Terminal
bower install --save moment

Los archivos notables son moment.js, locale/*.js y min/moment-with-locales.js.

Cargar Moment con Require.js

Recomendamos encarecidamente leer esto si planeas usar moment con Require.js. Actualiza también a 2.14.0 o superior para obtener la mejor experiencia.

Para empezar, es posible que hayas adquirido moment a través de bower o node_modules o cualquier otra cosa que coloque moment.js junto con un directorio local en una carpeta base. Entonces deberías usar una herramienta como adapt-pkg-main, o manualmente, usando packages config.

JavaScript
requirejs.config({
  packages: [{
    name: 'moment',
    // Esta ubicación es relativa a baseUrl. Elije bower_components 
    // o node_modules, dependiendo de cómo fue instalado moment.
    location: '[bower_components|node_modules]/moment',
    main: 'moment'
  }]
});

Con la configuración anterior, puedes requerir el núcleo con moment y el locale de con moment/locale/de.

JavaScript
// Solo necesita el core o núcleo.
define(['moment'], function (moment) {
	console.log(moment().format('LLLL'));  // 'Friday, June 24, 2016 1:42 AM'
});

// Core con un solo locale.
define(['moment', 'moment/locale/de'], function (moment) {
	moment.locale('de');
	console.log(moment().format('LLLL')); // 'Freitag, 24. Juni 2016 01:42'
});

// Core con todos los locales.
define(['moment/min/moment-with-locales'], function (moment) {
	moment.locale('de');
	console.log(moment().format('LLLL')); // 'Freitag, 24. Juni 2016 01:42'
});

// Carga async de locale.
define(['require', 'moment'], function(require, moment) {
  // Dentro de algún módulo después de que se detecta el locale. Este es el 
  // caso en el que no se conoce el locale antes del tiempo de carga del módulo.
  require(['moment/locale/de'], function(localeModule) {
    // Aquí el locale está cargado, pero aún no está en uso.
    console.log(moment().format('LLLL'));  // 'Friday, June 24, 2016 1:42 AM'

    moment.locale('de');
    // Utiliza moment ahora que el locale se ha configurado correctamente.
    console.log(moment().format('LLLL')); // 'Freitag, 24. Juni 2016 01:42'
  })
});

Para casos de uso más complicados, lee la excelente explicación de @jrburke.

Moment seguirá creando un moment global, que es útil para complementos y otros códigos de terceros. Si deseas evitar ese global, usa la opción noGlobal en la configuración del módulo.

JavaScript
require.config({
    config: {
        moment: {
            noGlobal: true
        }
    }
});
¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.

Si no especificas noGlobal, el moment exportado globalmente imprimirá una advertencia de obsolescencia. A partir de la próxima versión importante, tendrás que exportarlo tú mismo si deseas ese comportamiento.

Para la versión 2.5.x, en caso de que utilices otros complementos que dependan de Moment pero que no sean compatibles con AMD, es posible que debas agregar wrapShim: true a tu configuración r.js.

Nota: Para permitir que los complementos moment.js se carguen en entornos requirejs, moment se crea como un módulo con nombre. Debido a esto, moment debe cargarse exactamente como "moment", usando paths para determinar el directorio. Al solicitar un momento con una ruta como "vendor\moment", se devolverá undefined.

Nota: A partir de la versión 2.9.0, moment se exporta como un módulo anónimo, por lo que si usas solo el núcleo (sin configuraciones regionales ni complementos), no necesitas configuración si lo colocas en una ubicación no estándar.

Instalar Moment con NuGet

Si tu proyecto es en .NET puedes instalar Moment.js utilizando NuGet instalando particularmente el paquete Moment.js de la siguiente manera:

Terminal
Install-Package Moment.js

Instalar Moment con Meteor

Para instalar Moment.js con Meteor utilizando el paquete disponible en Atmosphere, específicamente el paquete momentjs:moment. La instalación se realiza con el siguiente comando:

Terminal
meteor add momentjs:moment

Usar Moment con Browserify

Puedes también instalar Moment.js para utilizarlo con Browserify. El primer paso es la instalación:

Terminal (Instalación con NPM)
npm install moment

Luego puedes utilizar Moment.js en los archivos que necesites:

JavaScript
var moment = require('moment');
moment().format();
¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.

Nota: Hay un error que impide que se cargue moment.locale.

JavaScript
var moment = require('moment');
moment.locale('cs');
console.log(moment.locale()); // en

Utiliza la siguiente solución

JavaScript
var moment = require('moment');
require('moment/locale/cs');
console.log(moment.locale()); // cs

Para incluir todas las configuraciones regionales

JavaScript
var moment = require('moment');
require("moment/min/locales.min");
moment.locale('cs');
console.log(moment.locale()); // cs

Usar Moment con Webpack

Con webpack también es posible utilizar Moment.js. Primero realizas la instalación con npm:

Terminal (Instalación con NPM)
npm install moment

Luego lo utilizas en tu código de la siguiente manera:

JavaScript
var moment = require('moment');
moment().format();

Nota: De forma predeterminada, el paquete web incluye todas las configuraciones regionales de Moment.js (en Moment.js 2.18.1, son 160 KB minificados). Para eliminar las configuraciones regionales innecesarias y agrupar solo las usadas, agrega moment-locales-webpack-plugin:

JavaScript
// webpack.config.js
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
    plugins: [
        // Para eliminar todas los locales excepto "en"
        new MomentLocalesPlugin(),

        // O: eliminar todas los locales excepto “en”, “es-us” y “ru” 
        // (“en” está integrado en Moment y no se puede eliminar)
        new MomentLocalesPlugin({
            localesToKeep: ['es-us', 'ru'],
        }),
    ],
};

Existen otros recursos para optimizar Moment.js con webpack, por ejemplo este.

Usar Moment en TypeScript

¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.

A partir de la versión 2.13.0, Moment incluye un archivo de definición para TypeScript.

Instalar a través de NPM:

Terminal (Instalación con NPM)
npm install moment

Importar y utilizar en tu archivo Typecript:

TypeScript
const moment = require('moment');

let now = moment().format('LLLL');

Nota: Si tienes problemas para importar moment:

Para TypeScript 2.x intenta agregar "moduleResolution": "node" en compilerOptions en tu archivo tsconfig.json

Para TypeScript 1.x intenta agregar "allowSyntheticDefaultImports": true en compilerOptions en tu archivo tsconfig.json y luego usa la sintaxis:

TypeScript
import moment from 'moment';

Importar Locale

Para utilizar moment.locale, primero debes importar el idioma al que se dirige.

TypeScript
import * as moment from 'moment';
import 'moment/locale/pt-br';

console.log(moment.locale()); // en
moment.locale('fr');
console.log(moment.locale()); // fr
moment.locale('pt-br');
console.log(moment.locale()); // pt-br

Cargar Moment con System.js

Para cargar moment, colócalo en la ruta especificada por tu System.config en la configuración de baseURL. Luego impórtalo a tu página.

HTML
<script src="system.js"></script>
<script>
  System.config({
    baseURL: '/app'
  });

  System.import('moment.js');
 </script>
¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.

Si necesitas que moment se cargue como global, puedes hacerlo con la configuración en meta:

JavaScript
System.config({
  meta: {
    'moment': { format: 'global' }
  }
});

Alternativamente, para proporcionar Moment como global solo para una dependencia específica, puedes hacer esto:

JavaScript
System.config({
  meta: {
    'path/to/global-file.js': {
      globals: {
        moment: 'moment'
      }
    }
  }
});

Otras opciones de instalación

Para usarlo en Java/Rhino, consulta estas instrucciones.

Para usarlo en Demandware, consulta estas instrucciones.

Solución de problemas

Si tiene algún problema, el primer lugar que debes consultar son las guías.

Si no encuentras lo que buscas allí, intenta hacer una pregunta en Stack Overflow con la etiqueta momentjs.

Nota: Más de la mitad de los problemas observados en Stack Overflow se pueden responder en esta publicación de blog.

También puedes utilizar el rastreador de issues de GitHub para buscar problemas relacionados o abrir un nuevo issue.

Además, Moment tiene un Gitter donde el equipo interno está disponible con frecuencia.

Para obtener ayuda general para la resolución de problemas, Stack Overflow es el foro preferido. Los mantenedores de Moment son muy activos en Stack Overflow, al igual que otros usuarios expertos. La respuesta más rápida estará ahí.

¿Sabías qué? Podrás evitar los principales errores al elegir tu empresa de Web Hosting leyendo nuestro artículo ¿Cuál es el mejor web hosting?.
Última actualización