Vamos a implementar una funcionalidad para mostrar mensajes comotipo “hace 10 minutos” o “hace 2 días” usando JavaScript y la api Intl.RelativeTimeFormat sin librerías externas.

La lógica base

Primero necesitamos calcular la diferencia entre dos fechas: la actual y la fecha objetivo. Luego, debemos decidir cuál es la unidad más adecuada para expresar esa diferencia (segundos, minutos, horas, días, etc.).

function getTimeAgo(date) {
  const now = new Date();
  const seconds = Math.floor((now - date) / 1000);

  const intervals = {
    year: 31536000,
    month: 2592000,
    week: 604800,
    day: 86400,
    hour: 3600,
    minute: 60,
    second: 1
  };

  for (const [unidad, segundosPorUnidad] of Object.entries(intervals)) {
    const valor = Math.floor(seconds / segundosPorUnidad);
    if (valor >= 1) {
      return new Intl.RelativeTimeFormat('es', { numeric: 'auto' })
        .format(-valor, unidad);
    }
  }

  return 'justo ahora';
}

En este fragmento:

• Calculamos cuántos segundos han pasado desde la fecha original.
• Iteramos por una lista de unidades de tiempo (ordenadas de mayor a menor en segundos).
• Cuando encontramos la primera unidad que representa al menos 1 unidad transcurrida, formateamos el resultado usando Intl.RelativeTimeFormat.

La llamada a format(-valor, unidad) usa valores negativos porque nos referimos a un tiempo pasado.

Ejemplo de uso

Supongamos que tenemos una lista de comentarios y queremos mostrar cuánto tiempo ha pasado desde que fueron creados.

const fechaComentario = new Date('2025-04-15T10:24:00');
console.log(getTimeAgo(fechaComentario));

Podemos integrar esta función fácilmente en cualquier parte de nuestro código, incluso como parte del renderizado de un componente, una plantilla o un elemento HTML.

Soporte y consideraciones

La API Intl.RelativeTimeFormat está disponible en la mayoría de los navegadores modernos, incluyendo versiones recientes de Chrome, Firefox, Edge y Safari. Si trabajamos con navegadores antiguos (como Internet Explorer), podríamos necesitar un polyfill.

También es importante tener en cuenta el idioma. En el ejemplo usamos 'es', pero podemos cambiarlo a 'en', 'fr', 'pt', etc., según el público de nuestra aplicación.

Resumen

Podemos mostrar fechas relativas de con JavaScript nativo usando Intl.RelativeTimeFormat. La lógica no es compleja y nos permite reducir dependencias en nuestro proyecto. Si bien no cubre todos los casos posibles (como cambios automáticos en tiempo real), para mostrar valores estáticos o actualizados manualmente es más que suficiente.