Manejo de fechas con MomentJS

Uno de los trabajos más tediosos en el mundo de la programación, pero a la vez, uno de los más necesarios, es el manejo de los diferentes datos con los que trabajamos dentro de nuestras aplicaciones. Conocer el formato de cada uno de ellos, las necesidades que requieren y las posibilidades que nos ofrecen es un trabajo de investigación por parte del programador. No podemos pasar este concepto por alto si queremos que nuestros proyectos sean sencillos de escalar en un futuro.

Dentro de la mayoría de lenguajes de programación encontramos una serie de tipos básicos de muy fácil manejo, entre los cuales podríamos situar a los números enteros o las cadenas de caracteres. El manejo de este tipo de datos es muy parecido en la mayoría de entornos y los métodos con los que nos vamos a enfrentar comparten gran cantidad de similitudes, operaciones sencillas, funciones de concatenación o búsquedas dentro de literales.

Cuando vamos más allá y necesitamos controlar otro tipo de datos, nos encontramos situaciones más complejas, es el caso del manejo de fechas.

No es Javascript el único lenguaje de programación donde nos vamos a tener que enfrentar con fechas, ya que la mayoría tiene sus propias herramientas para trabajar con ellas, pero sí podemos afirmar que son de vital importancia en el desarrollo web, sobre todo a la hora de organizar cronológicamente nuestros datos y tener un registro de actualizaciones de los mismos que nos facilite la presentación de nuestra web al usuario.

Javascript dispone de la clase Date para la obtención y el manejo de fechas. Los objetos creados a partir de esta clase son capaces de almacenar fechas y tiempos, por lo que son de vital importancia en aplicaciones que manejen calendarios, citas o algún tipo de programación. Además dispone de una serie de métodos que nos permiten dar formato y modificar nuestras fechas.

El caso más sencillo es la obtención de la fecha y la hora actual. Esto lo podemos conseguir llamando al constructor de la clase sin parámetros

const d = Date()
console.log (d)

// Thu Dec 28 2017 00:21:33 GMT+0100 (CET)

Con esta línea tan sencilla somos capaces de recuperar información sobre la fecha (día de la semana, mes, día, año) y sobre la hora (hora, minutos, segundos, zona temporal) de la máquina donde estemos ejecutando las sentencias.

Este tipo de objetos disponen de una gran cantidad de métodos útiles para tareas sencillas, como la obtención de cada uno de sus componentes o la modificación de los mismos. La tarea más compleja viene cuando nos queremos enfrentar a un cambio de formato que implique recolocar cada uno de los elementos contenidos dentro de la fecha y su posterior transformación a un literal que podamos representar en cualquier tipo de vista.

Es muy común encontrarse con esta problemática cuando trabajamos con fechas, ya que el formato con el que solemos recuperar los datos de nuestras bases de datos no es el más adecuado ni el más legible de cara al usuario. Es por ello que una tarea básica del programador es procurar que la fecha que vamos a mostrar sea comprensible por el tipo de usuario que maneje nuestras aplicaciones.

Llegados a este punto, disponer de gran cantidad de métodos puede ser un handicap a la hora de enfrentarse a esta tarea, podemos llegar a perdernos entre tanta implementación y que nuestra solución sea más compleja de lo realmente necesario.

Es por ello, que existen librerías que nos facilitan este trabajo, una de las más conocidas es MomentJS.

Se trata de una librería Javascript diseñada para poder trabajar tanto en el navegador como en NodeJS. Gracias a los diferentes métodos que nos ofrece, el manejo y el formato de las fechas se convierte en un trabajo sencillo y más agradable que con los objetos nativos del lenguaje.

Para poder utilizar esta librería en nuestros proyectos, podemos descargarla del siguiente enlace en cdnjs.com o instalarla a través de npm

npm install moment

---

var moment = require('moment')

Para trabajar en el navegador tendremos que importar el script que hemos descargado del siguiente modo

<script src="moment.js"></script>

En ambos casos, el uso es el mismo.

La creación de nuevas fechas a través de esta librería nos ofrece gran flexibilidad y múltiples opciones para trabajar dependiendo de los datos que manejemos. Mediante la llamada al método moment podemos recuperar la fecha y la hora actual, pero a su vez nos permite, pasándole diferentes tamaños, poder trabajar con las fechas que tengamos almacenadas en nuestra aplicación:

// Fecha y hora actual
moment().toString()
// Thu Dec 28 2017 09:17:59 GMT+0100

// A partir de una cadena de caracteres
moment("1983-09-20").toString()
// Tue Sep 20 1983 00:00:00 GMT+0200

// Tomando como fecha un objeto Date
moment(Date()).toString()
// Thu Dec 28 2017 09:29:13 GMT+0100

Es una manera muy cómoda de trabajar con objetos de tipo fecha, siempre y cuando vengan especificados en el estándar ISO 8601, el cual define una forma muy estricta para poder especificar las cadenas que representan nuestras fechas.

Si por cualquier razón, las fechas de nuestros proyectos no cumplen con dicho estándar, siempre podemos especificar el formato con el que vienen especificadas para que, MomentJS pueda recuperarlas sin problemas y posteriormente podamos trabajar con ellas sin problema. El formato se define como segundo parámetro en la llamada al método moment(), en forma de cadena de caracteres.

const update_date = moment('25-05-2013', 'DD-MM-YYYY')

Disponemos de diferentes símbolos para especificar el formato de nuestras fechas, los más comunes son los siguientes:

Símbolo Ejemplo Descripción YYYY 2012 Año con 2 o 4 dígitos M ó MM 1..12 Número de mes MMM ó MMMM Jan...December Nombre del mes D ó DD 1..31 Día del mes x 1212715410579 Timestamp en ms H ó HH 0..23 Hora en formato 24h m ó mm 0..59 Minutos s ó ss 0..59 Segundos Mediante la combinación de los símbolos anteriores y el uso de un único método alcanzamos la flexibilidad necesaria para poder trabajar con todo tipo de fechas, sea cual sea el formato al que nos enfrentamos.

Cada uno de estos objetos dispone de una serie de métodos get y set que nos permiten recuperar y modificar cualquiera de los componentes típicos de una fecha, siendo muy sencillo e intuitivo su manejo.

const fecha = moment()

fecha.toString()
// Thu Dec 28 2017 09:56:44 GMT+0100

// Recuperamos los segundos
fecha.seconds()
// 44

// Modificamos los segundos
fecha.seconds(30)
// 2017-12-28T09:56:30.286

// Modificamos los minutos
fecha.minutes(32)
// 2017-12-28T09:32:30.286

// Recuperamos el día de la semana
fecha.weekday()
// 4

Aparte de poder recuperar los diferentes datos y modificarlos con todo lujo de detalle, podemos realizar cálculos sencillos sobre nuestras fechas, agregando o eliminando rangos específicos gracias a los métodos add y subtract. Estos métodos reciben el número que vamos a sumar o restar y sobre qué componente lo hacemos.

moment().add(4, 'days')
moment().add(3, 'months').add(2, 'years')
moment([2017, 1, 21]).add(3, 'years')

moment().subtract(2, 'months')
moment().subtract(20, 'months').add(1, 'years')

Muy relacionado con la creación de objetos de tipo MomentJS, disponemos del método format, mediante el cual podemos especificar detalladamente cómo queremos mostrar nuestras fechas. Nos permite trabajar con los mismos símbolos que veíamos anteriormente. De esta manera, dependiendo del espacio de nuestro proyecto donde estemos trabajando, seremos capaces de mostrar unos componentes u otros de nuestras fechas.

moment().format('DD-MM-YYYY')
// 28-12-2017

moment().format('ddd')
// Thu

moment().format()
// 2017-12-28T10:29:25+01:00

Por último, puede resultar interesante en algunos proyectos comparar las fechas con las que estamos trabajando para saber si son iguales en alguno de sus componentes o son cronológicamente anteriores o posteriores. Para ello disponemos de los métodos isBefore, isAfter, isSame.

const fecha1 = moment('13-06-2009', 'DD-MM-YYYY')
const fecha2 = moment('23-11-2014', 'DD-MM-YYYY')

fecha1.isSame(fecha2)
// false

fecha1.isAfter(fecha2)
// false

fecha1.isBefore(fecha2)
// true

El número de métodos disponibles es muy grande y puede ser consultado en la página oficial de la librería en momentjs.com. Que sirva esta pequeña reseña para poder acercarnos al increíble potencial que tiene esta librería y las infinitas posibilidades que nos ofrece para manejar con facilidad las fechas de nuestros proyectos.