1

Tengo un problema con la forma en la que se muestra una fecha en el portal. Mi servidor almacena la fecha y hora en formato UTC, pero al mostrarlo en el portal, esta se muestra de forma local lo que no es correcto ya que mi zona horaria es GMT -5, lo cual me resta un día. Es decir si almaceno la fecha 24/07/1987, el portal muestra 26/07/1987.

El sistema espera a que la pagina del portal que contiene las fechas se termine de cargar, unas vez hecho esto, tengo una funcion JS la cual captura todas las fechas y las muestra en formato DD-MMM-YYY. Estoy utilizando la librería momentJS y he intentado setear la zona horaria a Atlantic/Azores para después formatear la fecha y para intentar resolver el problema sin embargo no he tenido éxito.

La fecha que se extrae del servidor es la siguiente:

Fecha DB: Fri Jul 24 1987 00:00:00 GMT+0000 (Coordinated Universal Time)

CODDIGO HTML:

td.fecha #{employees.birthDate}
td.fecha #{employees.hiringDate}

CODIGO JS:

(function cambioFecha(){
var fecha = document.getElementsByClassName("fecha");
for(i=0; i<fecha.length; i++){
    console.log("Fecha DB: " + fecha[i].textContent)
    moment.tz.setDefault("Atlantic/Azores");
    console.log( moment.tz.guess() );
    let m = moment( fecha[i].textContent ).tz('Atlantic/Azores').format();
    console.log(m)
    m = moment( fecha[i].textContent ).tz('Atlantic/Azores').format("DD-MMM-YYYY");
    console.log(m)

fecha[i].innerHTML=m;
}
})()

LAS IMPRESIONES EN CONSOLA SON LAS SIGUIENTES:

Logs de salida

Espero puedan ayudarme a resolverlo. Muchas gracias de antemano.

3 respuestas 3

2

Espero te sirva; observa los js que debes cargar y el orden de los mismos.

var laFechaStr='Fri Jul 24 1987 00:00:00 GMT+0000';
var laZona="Atlantic/Azores";

var laFecha =moment(laFechaStr);

//console.log("Moment TimeZone:", laFecha.tz.guess());
console.log("Fecha:", laFechaStr);
//console.log("moment.tz.setDefault:", moment.tz.guess());
console.log("Fecha con moment(con TZ: " + moment.tz.guess() + "):", laFecha.format());
console.log("Fecha con moment(con TZ: " + laZona + "):", laFecha.clone().tz(laZona).format());

console.log("Directo con TZ->" + laZona + ":", moment.tz(laFechaStr, laZona).format());
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.31/moment-timezone.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.31/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.31/moment-timezone-with-data.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.31/moment-timezone-utils.min.js"></script>

2
  • Hola compañero, te agradezco el apoyo. Gracias a tu comentario he notado mi error, al parecer el me faltaban estos scripts: moment-timezone-with-data.min.js moment-timezone-utils.min.js No sabia que eran necesarios ¿Tu podrás explicarme cual es su función? Gracias de antemano.
    – Antuanct
    Commented el 12 jul. 2020 a las 2:37
  • Saludos @Antuanct te quedare a deber su función; no profundice en lo que agrega cada uno de ellos. Solo que al momento de ejecutar en la consola salia que requería ese js. Commented el 12 jul. 2020 a las 2:50
0

No necesitas usar una librería para trabajar con el Objeto Date de Javascript. Lo que debes hacer es usar correctamente el estándar UTC.

En tu pregunta planteas que las fechas se almacenan en tu servidor con zona horaria neutra (UTC). Cuando un cliente realiza una petición a tu servidor, recibe el valor de la fecha en dicho formato, pero el navegador interpreta este valor en el formato de la fecha y hora local del sistema. A menos que el sistema se encuentre en zona horaria neutra (y sin cambios de horario por verano) la fecha se mostrará con el valor de la fecha local del sistema.

Por ejemplo:

// La siguiente fecha está en formato UTC:
const fechaUTC = new Date(Date.UTC(2020, 6, 10, 0, 0, 0 ,0));

// La siguiente fecha está en formato Local:
const fechaLocal = new Date(2020, 6, 10, 0, 0, 0 ,0);

// fecha UTC:
console.log(fechaUTC);

//fecha Local:
console.log(fechaLocal);
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

Dependiendo de la zona horaria en la que te encuentres, el valor de fechaLocal variará, sin embargo, el valor de fechaUTC será el mismo para cualquier zona horaria que tenga el cliente.

Pero ¿porqué la fecha almacenada usando el formato Local, no coincide con los valores introducidos al constructor?

Allí es donde entra el estándar UTC y la implementación del Objeto Date de Javascript:

La fecha se mide en milisegundos desde la media noche exacta del 01 de enero de 1970 en formato UTC.

Cuando generas una fecha usando el formato local del cliente, la misma será almacenada como el valor en milisegundos en formato UTC, independientemente de la zona horaria, es por ello, que una fecha en formato UTC al ser presentada en el cliente será convertida al formato local del cliente, añadiendo o quitando horas de acuerdo a la zona horaria del mismo.

SOLUCIÓN

Supongamos que recibes la siguiente cadena de fecha desde el servidor:

const fechaRecibida = new Date('Fri Jul 24 1987 00:00:00 GMT+0000');

Si tu cliente se encuentra en el horario UTC-5:00, la fecha recibida será mostrada en el formato local, es decir se le restarán 5 horas a la fecha recibida, quedando como:

'Thu Jul 23 1987 19:00:00 GMT-0500 (<valor de zona horaria>)'

Veamos un ejemplo:

const fechaRecibida = new Date('Fri Jul 24 1987 00:00:00 GMT+0000');

// Se muestra en UTC
console.log(fechaRecibida.toUTCString());

//Se muestra en la zona horaria local:
console.log(fechaRecibida.toString());
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

Esto provoca que al intentar obtener el día de dicha fecha, el valor no coincidirá con el que nos devuelve nuestro servidor.

Dicho de otra forma, se obtendrá el valor correspondiente a la zona horaria usada por el cliente. Siendo la misma 5 horas menos que la zona UTC, el día obtenido será un número menor al almacenado en el servidor.

Por ejemplo:

// fecha en zona horaria UTC-05:00
const fecha = new Date('Fri Jul 10 2020 19:00:00 GMT-0500');

let diaLocal = fecha.getDate();
let diaUTC = fecha.getUTCDate();

console.log(`El día de la fecha local es: ${diaLocal}`); // mostrará 10 para zonas horarias negativas

console.log(`El día de la fecha UTC es: ${diaUTC}`); // mostrará 11 independientemente de la zona horaria.

// mostrará la fecha en la zona horaria del cliente
console.log(fecha.toString());

// mostrará la fecha en la zona horaria UTC
console.log(fecha.toUTCString());
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

Sabiendo este comportamiento, es fácil entonces escribir un método que dada una fecha en zona horaria UTC, devuelva el valor de la misma con formato DD-MM-YYYY cuyos valores correspondan al horario UTC y no al horario del cliente.

Tu método podría lucir así:

const formatDateUTC = (dateString) => {
  let fecha = new Date(dateString);
  const dia = fecha.getUTCDate().toString().padStart(2,'0');
  const mes = (fecha.getUTCMonth() + 1).toString().padStart(2,'0');
  const year = fecha.getUTCFullYear().toString();
  return `${dia}-${mes}-${year}`;
}

const fechaRecibida = 'Fri Jul 24 1987 00:00:00 GMT+0000';

const fechaLocal = 'Thu Jul 23 1987 19:00:00 GMT-0500';

console.log(formatDateUTC(fechaRecibida)); // 24-07-1987

console.log(formatDateUTC(fechaLocal)); //24-07-1987
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

Espero que esto te ayude a solucionar el problema.

0

// La siguiente fecha está en formato UTC:
const fechaUTC = new Date(Date.UTC(2020, 6, 10, 0, 0, 0 ,0));

// La siguiente fecha está en formato Local:
const fechaLocal = new Date(2020, 6, 10, 0, 0, 0 ,0);

// fecha UTC:
console.log(fechaUTC);

//fecha Local:
console.log(fechaLocal);
.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.