AngularJS – Zonas horarias

octubre 27, 2015

El concepto del tiempo es algo que pareciera muy sencillo de entender pero en realidad es un tema muy complejo, y más aún para las computadoras.

Recientemente terminó el horario de verano en México. En una aplicación hecha con angular mostraba una hora utilizando el filtro estándar de angular

<td><h4><strong>{{audiencia.inicio | date: 'h:mm a' : '-0500'}}</strong></h4></td>

el problema es que estamos especificando un ‘offset’ o desplazamiento de ‘-05:00’ el cuál es válido solamente durante el horario de verano. Una vez concluído este debe ser de ‘-06:00’.

Para evitar este problema podemos utilizar una librería como (moment.js)[http://momentjs.com/] con su complemento (moment-timezone.js)[http://momentjs.com/timezone/]. Para facilitar aún más las cosas podemos utilizar la librería (angular-moment.js)[https://github.com/urish/angular-moment].

Lo primero es agregar las dependencias (en nuestro caso utilizamos bower para simplificar este proceso)

bower install angular-moment#1.0.0-beta.2 --save
bower install moment-timezone --save

es importante instalar al menos la versión 1.0.0-beta.2 de acuerdo a la documentación

obvio hay que agregarlas en nuestra página

<a href="http://bower_components/moment/moment.js">http://bower_components/moment/moment.js</a>
        <a href="http://bower_components/angular-moment/angular-moment.js">http://bower_components/angular-moment/angular-moment.js</a>
        <a href="http://bower_components/moment-timezone/builds/moment-timezone-with-data-2010-2020.js">http://bower_components/moment-timezone/builds/moment-timezone-with-data-2010-2020.js</a>

y agregar la dependencia en angular

var myapp = angular.module('myapp', ['angularMoment']);

finalmente ya podemos utilizar los filtros de angular-moment en nuestra aplicación, por ejemplo:

<td><h4><strong>{{audiencia.inicio | amTimezone: 'America/Mexico_City' | amDateFormat: 'h:mm a'}}</strong></h4></td>

y cuando llegué el próximo cambio de horario de verano, la hora será actualizada automáticamente (al menos hasta el 2020, las fechas en que entran en vigor los horarios de verano son susceptibles de cambios).

Si tienes problemas similares en el servidor, prueba (joda-time)[http://www.joda.org/joda-time/] o las (nuevas clases de Java 8)[http://www.oracle.com/technetwork/articles/java/jf14-date-time-2125367.html].

Fuentes:
http://stackoverflow.com/questions/26069696/how-to-use-the-utc-time-zone-with-the-angular-date-filter
https://docs.angularjs.org/api/ng/filter/date
http://www.epochconverter.com/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: