Ver Mensaje Individual
  #11 (permalink)  
Antiguo 27/10/2014, 13:32
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Fecha con Javascript

Si quieres hacerlo de manera temporal, sin guardar datos en la BD, es decir, solo JS, podrías guardar el tiempo en el cual se publica cada mensaje en un pseudo-atributo dentro del elemento en el que muestras a cada mensaje. Luego, con un temporizador, vas restando el tiempo actual con cada uno de los tiempos guardados y muestras la diferencia.

Un pequeño ejemplo:
Código HTML:
Ver original
  1. Mensaje: <textarea></textarea>
  2. <button>Publicar</button>
  3. <div></div>

Código Javascript:
Ver original
  1. var textarea = document.querySelector("textarea"),
  2.     button = document.querySelector("button"),
  3.     div = document.querySelector("div");
  4.  
  5. button.addEventListener("click", function(){
  6.     if (textarea.value.length){
  7.         var p = document.createElement("p"),
  8.             span = document.createElement("span");
  9.         p.innerHTML = textarea.value.replace(/\n+/g, "<br />");
  10.         p.setAttribute("data-time", new Date().getTime());
  11.         p.appendChild(span);
  12.         div.appendChild(p);
  13.         textarea.value = null;
  14.         textarea.focus();
  15.     }
  16. }, false);
  17.  
  18. setInterval(function(){
  19.     var par = div.querySelectorAll("p"),
  20.         len = par.length;
  21.     for (var i = 0; i < len; i++){
  22.         var now = new Date().getTime(),
  23.             then = par[i].getAttribute("data-time"),
  24.             diff = ((now - then) / 1000) / 60,
  25.             span = par[i].querySelector("span");
  26.         span.innerHTML = diff.toFixed() + " minutes ago";
  27.     }
  28. }, 60000);

Cuando pulso el botón para publicar el mensaje, verifico primero que se haya escrito un mensaje (aunque también podrías deshabilitar al botón y habilitarlo cuando se pulse una tecla teniendo el área de texto el enfoque y luego de verificar que tenga contenido) y si esta condición se cumple, creo un párrafo, en el que mostraré el mensaje escrito y un <span>, en donde mostraré el tiempo transcurrido desde la publicación del mensaje. Asigno el contenido del área de texto al párrafo, en el cual reemplazo los saltos de línea por elementos <br /> para que estos sean visibles en el párrafo, creo un pseudo-atributo data-time y le asigno el tiempo actual en milésimas de segundo. Añado el <span> creado al párrafo y este al <div>. Por último, elimino el contenido del área de texto y le doy el enfoque para seguir escribiendo mensajes.

Luego, establezco un temporizador que ejecutará una función cada 60000 milésimas de segundo, lo cual equivale a 60 segundos o 1 minuto. En dicha función, tomo a la colección de párrafos contenidos en el <div> y calculo el total que estos representan, luego, con ayuda de un bucle, recorro a dicha colección. En cada iteración, tomo el tiempo actual en milésimas de segundo, el tiempo guardado en el pseudo-atributo data-time del párrafo actual en la iteración, resto ambas cantidades, tomo al <span> del párrafo y le asigno como contenido el resultado de la resta anterior sin decimales y un texto complementario.

Puedes personalizar esto, por ejemplo, que el temporizador se ejecute en intervalos mayores o menores o que no se muestre la diferencia en minutos sino en segundos u horas o que el tiempo transcurrido se muestre inmediatamente después de publicar el mensaje. Eso lo decides tú. También te sugiero utilizar identificadores para cada elemento, así no habrán conflictos con otros elementos similares, además de validar el texto escrito.

DEMO

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 27/10/2014 a las 13:55 Razón: Mejora