Controla el tiempo con Momentjs

Controla el tiempo con Momentjs
Escrito 3 years ago

Momentjs es una librería para crear y gestionar fechas y horas en javascript. Ahora que javascript se está convirtiendo en el lenguaje de moda para la creación de aplicaciones web, era necesario una librería para gestionar fechas de manera sencilla y rápida. Momentjs cumple con eso y más. Puede analizar cualquier fecha, mostrar fechas en cualquier formato, comparar fechas, sumar y restar tiempo a ellas, puede crear fechas relativas. Y lo más importante, tiene un sistema para internacionalizar fechas y mostrarlas en cualquier idioma del mundo.

Analizar fechas

Para empezar analizar fechas debemos utilizar el objeto principal del framework: moment().

Analizar fecha
1
2
//parseamos la fecha 30-11-1997 13:47
var fecha1 = moment('30/11/1997 13:47', 'DD-MM-YYYY HH:mm');

El primer parámetro 30-11-1997 13:47 es la fecha que queremos recoger. En el segundo parámetro DD-MM-YYYY HH:mm indicamos el formato de la fecha que le hemos pasado. Haz clic aquí para ver de manera más completa los posibles formatos que tiene Momentjs. La variable fecha1 guarda la fecha que acabamos de analizar.

Dar formato a las fechas

Ahora que ya hemos creado nuestra fecha fecha1, vamos a mostrarla en varios formatos. Par ello utilizamos el método format() que tiene nuestro objeto fecha1

Mostrar fecha en distintos formatos
1
2
3
4
5
6
7
8
9
console.log(fecha1.format('DD/MM/YY'));
// > 30/11/97
console.log(fecha1.format('hh:mm A'));
// > 01:47 PM

//Añadir texto literal al formato de nuestra fecha.
//El texto que queremos añadir dentro de la fecha deber ir entre corchetes.
console.log(fecha1.format('[El día es] DD/MM/YY [y la hora] HH:mm'));
// > El día es 30/11/97 y la hora 13:47

La lista completa de formatos que podemos dar en las fechas la podéis encontrar [link=http://momentjs.com/docs/#/displaying/format/]aquí[/link]. Si se quiere añadir frases o palabras dentro del formato hay que escribirlos dentro de corchetes.

Operar con fechas

Momentjs también permite sumar y restar tiempo a unas fechas ya creadas y comparar 2 fechas.

Operar con fechas
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
//Sumar 1 año a la fecha 'fecha1'
fecha1.add(1, 'year');
console.log(fecha1.format('DD/MM/YYYY'));
// > 30/11/1998

//Restar 1 mes a la fecha 'fecha1'
fecha1.subtract(1, 'month');
console.log(fecha1.format('DD/MM/YYYY'));
// > 30/10/1998

//Comparar si el año de fecha1 es anterior a 2010-01-31
console.log(fecha1.isBefore('2010-01-31', 'year'));
// > true

//Comparar si el año de fecha1 es anterior a 1991-01-01
console.log(fecha1.isBefore('1991-01-01', 'year'));
// > false

En la linea 2 de este ejemplo sumamos 1 año a la fecha fecha1 con el método add(). El primer parámetro es la cantidad que queremos sumar; el segundo es el tiempo que queremos sumar. Puede ser: year, month, day, hour, minute, second, milisecond. En la linea 7 hacemos algo similar, solo que en vez de sumar, restamos tiempo a la fecha, utilizando el método subtract. Los parámetros de este método son idénticos al método add. Al final del ejemplo comprobamos si el año de fecha1 anterior a 2 fechas, la primera 2010-01-31 que es true y la segunda 1991-01-01 que es false. Existen funciones similares a isBefore. Que nos permite comparar distintas fechas. Más información en los documentación de Momentjs

Internacionalización

Otra de las grandes opciones que tiene Momentjs es su sistema de Internacionalización. Podemos adaptar nuestras fechas en función de una localización o lenguaje. Este sistema también nos sirve para escribir meses del año y días de la semana en distintos idiomas.

Usar location en Momentjs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
var fecha2 = moment('2-8-2003 21:22', 'DD-MM-YYYY HH:mm');
// Mostrar la fecha en formato Inglés. Por defecto
console.log('Formato inglés: ', fecha2.format('LLL'));
// > Formato inglés: August 2, 2003 9:22 PM

//Cambiar a formato español
fecha2.locale('es');
// Mostrar la fecha en formato español.
console.log('Formato español: ', fecha2.format('LLL'));
// > Formato español: 2 de agosto de 2003 21:22

//Mostrar fechas personalizada en idioma español
console.log(fecha2.format('[Cumple los años en] MMMM'));
// > Cumple los años en agosto

//Si se utiliza moment() sin parámetro. Usa la fecha de ahora.
console.log(moment().locale('es').format('[Hoy es] dddd'));
// > Hoy es domingo (Día de hoy)

La variable fecha2 guarda la fecha 2-8-2003 21:22 y la mostramos utilizando el formato LLL, que es un código especial que muestra la fecha y la hora en un formato que depende del idioma (por defecto el idioma es el Inglés). Pero podemos cambiarlo a otro lenguaje(linea 7) y mostrar la fecha en este lenguaje. Fijaos que no solo se cambia el idioma sino también el orden en el que aparece los elementos de la fecha. Esta se adapta a la manera de escribir una fecha en un determinado idioma. Inglés: August 2, 2003 9:22 PM. Español 2 de agosto de 2003 21:22. También podemos utilizar el nombres de los meses y los días para crear formatos personalizados, como se ve en la linea 14 y 18.

Fechas relativas

Las fechas relativas se han vuelto populares estos últimos años debido a que son fáciles de interpretar para el usuario. Nos ayuda a percibir con mayor claridad el tiempo que ha pasado o el tiempo que queda para un evento. Veamos algunos ejemplos de fechas relativas creadas con Momentjs.

Fechas relativas
1
2
3
4
5
6
7
8
9
//Fecha con idioma español.
var fecha3 = moment('12/12/2012', 'DD/MM/YYYY').locale('es');
console.log(fecha3.fromNow());
// > hace 3 años

//Fecha futura.
var fecha4 = moment('20/12/2020', 'DD/MM/YYYY').locale('es');
console.log(fecha4.fromNow());
// > en 5 años

En este ejemplo, para usar las fechas relativas utilizamos el método fromNow El cual nos da una fecha relativa partiendo de la fecha actual now(). También se puede utilizar otra fecha distinta a la de ahora, [Más información](http://momentjs.com/docs/#/displaying/fromnow/. Recordad que las fechas relativas hace X años y en X años se adaptan al idioma que queramos.

Conclusiones

Aquí solo se ha mostrado unos pocos ejemplos, pero Momentjs tiene mucho más, por ejemplo podemos crear también contadores de tiempo. Resumiendo, Momentjs es una gran librería para javascript, ligera y fácil de usar que nos ahorrará muchos dolores de cabeza a la hora de tratar con fechas en javascript. Como nota final decir que esta librería se puede modularizar. La librería completa son 54 KB aproximadamente, pero existen versiones, a través de cdjn donde puedes escoger una única localización y que son aun más ligeras. Podeis ver estos ejemplos en funcionamiento y juguetear con la librería en este enlace: https://jsfiddle.net/davidnotplay/nb0jebyq/

Comentarios