0

¡Hola! Esta vez no tengo ningún código porque seguro que no es ni necesario, tengo una base de datos de mensajes privados, esta se compone de los siguientes campos:

  • id (PK, única)
  • usuario (quien envía el mensaje)
  • mensaje
  • para (quien recibe el mensaje)
  • fecha

Mi pregunta es sobre la fecha:

¿Cómo pongo para que diga hace cuanto se envió el mensaje?

En plan, se envía el mensaje y aparece: Enviado Justo ahora, Hace 1 min, 1 hora, 1 día y así

No se si sea muy compleja, si debo agregar código díganme por favor, es que no me parece necesario ya que lo que tengo que hacer es editar la tabla que uso desde phpmyadmin (supongo).

No uso librerias externas.

¡Gracias por la ayuda que puedan brindarme!

EDIT

Parece que, obviamente, debo cambiar la fecha desde el código, supongo que con un js que calcule hace cuanto se envió. ¿Me pueden dar un ejemplo de como hacer eso? no quiero que hagan el código, por favor, me gustaría saber crear esto por mi mismo, pero si una ayuda para saber como hacerlo.

8
  • no. la tabla dice la fecha en que se envio, y en tu consulta o tu pantalla (mucho mejor en tu pantalla) haces la transformacion a la forma que vos queres y ahi mostras el mensaje. Si no, imaginate que tenes ahi el tiempo transcurrido, deberias tener un proceso que corra cada segudno en tu base de datos contra todos tus registros que ajustara eso...
    – gbianchi
    el 21 sep. 2020 a las 16:39
  • Si imagine eso, supongo que se hace con con script js, me das un ejemplo de como hacerlo? btw gracias por las veces que me ayudaste, siempre respondes mis preguntas! el 21 sep. 2020 a las 16:40
  • ni idea como hacerlo, y tampoco si habra librerias para hacerlo...
    – gbianchi
    el 21 sep. 2020 a las 16:42
  • Jaja, gracias, buscare en internet como hacerlo mientras espero si alguien responde la pregunta el 21 sep. 2020 a las 16:42
  • Talvez ésto pueda encaminarte a lo que necesitas. Saludos ;)
    – Israel-ICM
    el 21 sep. 2020 a las 17:12

1 respuesta 1

2

No es tan complicado:

  • HTML:
    • Creas un contenedor con clase específica para cada fecha que quieras modificar
    • Se debe incluir fecha y hora
<div>
    Mensaje 1<br>
    Publicado: <span class="fecha">2020-09-21 10:15:00</span>
</div>
<div>
    Mensaje 2<br>
    Publicado: <span class="fecha">2020-03-15 20:37:00</span>
</div>
<div>
    Mensaje 3<br>
    Publicado: <span class="fecha">2018-08-31 07:22:00</span>
</div>
  • Javascript:
    • Creas variables para realizar comparaciones: hora, día, semana, mes y año
    • Al cargar el DOM ejecutas una función para recorrer todos los elementos con la clase especificada
    • Envías a una función el elemento y la fecha (como objeto Date)
// Crear variables para comparaciones
let hora = 60 * 60;
let dia = hora * 24;
let semana = dia * 7;
let mes = Math.floor(dia * 30.42);
let anio = dia * 365;

// Ejecutar hasta que cargue el DOM
document.addEventListener('DOMContentLoaded', () => {
    // Recorrer todos los elementos con clase "fecha"
    document.querySelectorAll('.fecha').forEach((span, i) => {
        // Enviar fecha como objeto Date
        let fecha = new Date(span.innerText);
        // Remplazar inmediatamente
        datosFecha(span, fecha);
        // Crear intervalo para actualizar cada segundo
        setInterval(datosFecha, 1000, span, fecha);
    });
});
  • Dentro de la función:
    • Calculas la diferencia contra la fecha actual, en segundos
    • Si la diferencia es menor de 60 segundos: Hace un momento
    • Si la diferencia es menor de 1 hora: Hace x minutos
    • continúas comparando días, semanas, meses y años

Importante: Ya que quieres hacerlo por ti, no abras el fragmento de código hasta haberlo intentado, creo que las bases son bastante claras para poder llegar al resultado deseado.

// Crear variables para comparaciones
let hora = 60 * 60;
let dia = hora * 24;
let semana = dia * 7;
let mes = Math.floor(dia * 30.42);
let anio = dia * 365;

// Ejecutar hasta que cargue el DOM
document.addEventListener('DOMContentLoaded', () => {
    // Recorrer todos los elementos con clase "fecha"
    document.querySelectorAll('.fecha').forEach((span, i) => {
        // Enviar fecha como objeto Date
        let fecha = new Date(span.innerText);
        // Solo para probar: Poner fecha actual al primer elemento
        if(i == 0) fecha = new Date(); // Elimina o comenta esta línea
        // Remplazar inmediatamente
        datosFecha(span, fecha);
        // Crear intervalo para actualizar cada segundo
        setInterval(datosFecha, 1000, span, fecha);
    });
});
function datosFecha(span, fecha) {
    // Calcular con base en fecha y hora actual
    let hoy = new Date();
    // Obtener diferencia en segundos, por eso se divide entre 1000
    let diff = Math.floor((hoy.getTime() - fecha.getTime()) / 1000);
    // Mensaje a poner en contenedor
    let tiempo = '';
    switch (true) {
        // Si es menor a 1 minuto
        case (diff < 60):
            tiempo = 'un momento';
            break;
        // Si es menor a 1 hora
        case (diff < hora):
            tiempo = Math.floor(diff / 60) + ' minutos';
            break;
        // Si es menor a 1 día
        case (diff < dia):
            tiempo = Math.floor(diff / hora) + ' horas';
            break;
        // Si es menor a 1 semana
        case (diff < semana):
            tiempo = Math.floor(diff / dia) + ' días';
            break;
        // Si es menor a 1 mes
        case (diff < mes):
            tiempo = Math.floor(diff / semana) + ' semanas';
            break;
        // Si es menor a 1 año
        case (diff < anio):
            tiempo = Math.floor(diff / mes) + ' meses';
            break;
        // Es mayor a 1 año
        default:
            tiempo = Math.floor(diff / anio) + ' años';
            break;
    }
    // Mostrar tiempo transcurrido
    span.innerText = 'Hace ' + tiempo;
}
<div>
    Mensaje 1<br>
    Publicado: <span class="fecha">2020-09-21 10:15:00</span>
</div>
<div>
    Mensaje 2<br>
    Publicado: <span class="fecha">2020-03-15 20:37:00</span>
</div>
<div>
    Mensaje 3<br>
    Publicado: <span class="fecha">2018-08-31 07:22:00</span>
</div>

Cosas a mejorar:

  • Validar que cada elemento tiene una fecha correcta
  • Probablemente no sea necesario el intervalo si la fecha es mayor de 1 semana, pero ya es cuestión de preferencias y "preocupación" por rendimiento si se trata de muchas fechas
  • Formatear correctamente cuando la diferencia es 1, para evitar que aparezca "1 minutos", "1 horas", etc.
  • También se podría poner un título con la fecha original, como hace SOes en los comentarios
3
  • No se quien te dio un voto negativo, con todo lo que me pasaron puedo crear un reloj que calcula la hora de marte con precision exacta xd, gracias por tu ayuda. el 21 sep. 2020 a las 19:00
  • @SilviaManquis, seguramente el mismo que a ti, por no incluir lo que intentaste en la pregunta. Lo importante no es el voto, sino que hayas aprendido algo.
    – Triby
    el 21 sep. 2020 a las 19:22
  • Oh si, jaja, bueno, con lo que tengo es suficiente, si a alguien no le gusta bien, a mi me funcionaron todas las respuestas jaja, pondre la tuya como la respuesta el 21 sep. 2020 a las 21:26

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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