En este post de JavaScript vamos a mostrar el tiempo relativo transcurrido o faltante entre 2 fechas de manera relativa usando Intl.RelativeTimeFormat.

Básicamente vamos a mostrar el “hace 2 minutos”, “hace 2 horas,” “dentro de 1 día”, “dentro de un mes” pero siendo capaces de cambiar el idioma.

De este modo podremos mostrar el tiempo que falta o el tiempo que ha transcurrido con JavaScript en cualquier idioma.

Creando un formateador

Primero vamos a instanciar el RelativeTimeFormat así:

const formateadorFechasRelativas = new Intl.RelativeTimeFormat('es-MX', { style: 'long', });

En este caso le estoy indicando el locale como es-MX, que sería español de México. Luego podemos invocar a format indicando la cantidad y la unidad de medida.

Indicar tiempo transcurrido o faltante según idioma con JS

Ejemplos:

formateadorFechasRelativas.format(-7,'day')
//'hace 7 días'
formateadorFechasRelativas.format(-7,'hour')
//'hace 7 horas'
formateadorFechasRelativas.format(50,'minute')
//'dentro de 50 minutos'

Si te fijas, se agrega automáticamente el “hace X horas” o minutos, y también el “dentro de X minutos”, ya sea horas, días, etcétera. Si cambiamos el locale, ahora lo dice en otro idioma:

const formateadorFechasRelativas = new Intl.RelativeTimeFormat('en-US', { style: 'long', });
formateadorFechasRelativas.format(-7,'day')
//'7 days ago'
formateadorFechasRelativas.format(-7,'hour')
//'7 hours ago'
formateadorFechasRelativas.format(50,'minute')
//'in 50 minutes'

Además, el formateador hace la pluralización, si es 1 minuto entonces dice 1 minuto, si es 0 o más de uno, dice “minutos” y esto es válido para cualquier idioma o medida de tiempo.

RelativeTimeFormat con fechas (clase Date)

Ya te enseñé a mostrar el tiempo transcurrido de manera relativa y según el idioma pero para enteros definidos por nosotros.

Ahora veamos cómo podemos hacerlo con fechas.

Como ya te mostré en mi post de sumar y restar fechas con JavaScript, podemos obtener la cantidad de segundos, minutos, horas, días, semanas o meses a partir de los milisegundos de diferencia.

const formateadorFechasRelativas = new Intl.RelativeTimeFormat('en-US', { style: 'long', });
const lanzamientoRE4 = new Date("2023-03-24T00:00:00");
const ahora = new Date();
const diferenciaEnMilisegundos = lanzamientoRE4.getTime() - ahora.getTime();
const diferenciaEnDias = diferenciaEnMilisegundos/1000/60/60/24;
formateadorFechasRelativas.format(diferenciaEnDias, 'day');

En este caso vamos a ver cómo mostrar, de manera relativa y elegante, cuánto tiempo falta para una fecha del futuro. He elegido la fecha de salida de RE4 remake que es el 23 de marzo de 2023.

Creamos la fecha del futuro y luego la fecha actual. Luego calculamos la diferencia en días convirtiendo los milisegundos a segundos, luego a minutos, luego a horas y luego a días en la línea 5.

Finalmente en la línea 6 formateamos esa diferencia y obtendremos la salida: in 55.509 days

No te preocupes por los decimales, puedes invocar a Math.floor para redondear hacia abajo y así obtener un entero.

La magia de esto es que al cambiar el locale todo seguirá funcionando igual y se mostrará en el idioma del usuario.

Bonus: tiempo transcurrido del pasado

Si hacemos la misma operación que el ejemplo anterior pero ahora ponemos una fecha del pasado, entonces el resultado será un número negativo y el formateador seguirá funcionando sin problemas.

Así, si nosotros anunciamos un producto que saldrá en el futuro, a los usuarios les aparecerá “dentro de X días” pero si visitan la página del producto después del estreno, aparecerá “hace X días”.

Mira el siguiente ejemplo. He cambiado la fecha de la línea 2 para que sea una fecha del pasado, lo demás lo he dejado intacto.

const formateadorFechasRelativas = new Intl.RelativeTimeFormat('en-US', { style: 'long', });
const lanzamientoRE4 = new Date("2022-03-24T00:00:00");
const ahora = new Date();
const diferenciaEnMilisegundos = lanzamientoRE4.getTime() - ahora.getTime();
const diferenciaEnDias = diferenciaEnMilisegundos/1000/60/60/24;
formateadorFechasRelativas.format(diferenciaEnDias, 'day');

La salida es: 309.493 days ago

Conclusión

Con todas estas APIs de Intl podemos formatear números, fechas, fechas relativas y dinero dependiendo del idioma de los usuarios.

No olvides que esto sirve en JavaScript del lado del cliente y también en el lado del servidor con Node.

La API que te mostré aquí permite más cosas como formatear por partes, indicar otros estilos, etcétera. Puedes leer la documentación por aquí.

Y para terminar te dejo con más tutoriales de JavaScript en mi blog.