Fechas UTC, JavaScript, jQuery timeago, templates y otras hierbas

El otro día hablabamos por twitter sobre fechas UTC, sobre si nuestra aplicación, en mi caso servicio REST, debe devolver la fecha UTC al cliente y si este debe ser el encargado de transformarla. Yo soy de los que piensa que sí, que debemos almacenar la fecha en UTC en base de datos y retornarla al cliente tal cual y delegar en él la responsabilidad detransformarña a su locale correspondiente.

En nuestra aplicación, tenemos un front-end desarrollado con jQuery y templates javascript que se encargan de renderizar el JSON que devuelve el servicio REST. A la fecha que devuelve el servicio dentro el objeto JSON, le aplicamos una función javascript para parsear la fecha y al mismo tiempo usamos un plugin llamado timeago para simular las fechas como twitter y facebook, del tipo:

image

¿Cuál es el problema de esa imagen?

Esa actividad, la acabo de añadir y me dice que la he añadido hace una hora

¿Qué ha pasado?

Pues que como la hora la estoy enviando en UTC desde el servicio REST y a la hora de hacer el new Date() javascript no está teniendo en cuenta mi locale, pues timeago me dice que se ha introducido hace una hora.

¿Cómo se soluciona esto?

He visto por algún foro que se puede hacer con las funciones setUTCXXX del objeto Date y he modificado la función del parser a esta:

function formatDate(date) {

    var utcDate = new Date(parseInt(date.substr(6)));

    var localeDate = new Date();

    localeDate.setUTCDate(utcDate.getDate());

    localeDate.setUTCHours(utcDate.getHours());

    localeDate.setUTCMonth(utcDate.getMonth());

    localeDate.setUTCMinutes(utcDate.getMinutes());

    localeDate.setUTCSeconds(utcDate.getSeconds());

    localeDate.setUTCMilliseconds(utcDate.getMilliseconds());

    return jQuery.timeago(localeDate);

}

Estas funciones sí tienen en cuenta el locale del cliente y muestran la fecha correctamente al usar timeago:

image

Y sí depuramos el script con las developers tools podemos apreciar la fecha UTC y la de mi locale una vez ejecutadas todas las funciones setUTC al objeto localeDate:

image

Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *