descargar - Biblioteca Javascript para formato de fecha relativa amigable para los humanos

javascript descargar

Question

Me gustaría mostrar algunas fechas relativas a la fecha actual en un formato amigable para los humanos.

Ejemplos de fechas relativas amigables para los humanos:

• Hace 10 segundos
• 20 minutos a partir de ahora
• Hace 1 día
• Hace 5 semanas
• Hace 2 meses

Básicamente, preservar fielmente el orden de magnitud más elevado (y, por preferencia, solo cambiar las unidades al pasar 2 de esas unidades, 5 semanas en lugar de 1 mes).

Aunque podría vivir con una biblioteca que tenía menos control e incluso fechas más amigables como:

• ayer
• mañana
• la semana pasada
• Hace pocos minutos
• en un par de horas

¿Alguna biblioteca popular para esto?

Answer 1

Aquí hay algo de John Resig - http://ejohn.org/blog/javascript-pretty-date/

EDITAR (27/06/2014): Siguiendo con el comentario de Sumurai8 , aunque la página enlazada aún funciona, aquí está el extracto del pretty.js vinculado al artículo anterior:

pretty.js

/*
* JavaScript Pretty Date
* Copyright (c) 2011 John Resig (ejohn.org)
* Licensed under the MIT and GPL licenses.
*/
// Takes an ISO time and returns a string representing how
// long ago the date represents.
function prettyDate(time) {
var date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")),
diff = (((new Date()).getTime() - date.getTime()) / 1000),
day_diff = Math.floor(diff / 86400);
if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31) return;
return day_diff == 0 && (
diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor(diff / 60) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor(diff / 3600) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 7 && day_diff + " days ago" || day_diff < 31 && Math.ceil(day_diff / 7) + " weeks ago";
}
// If jQuery is included in the page, adds a jQuery plugin to handle it as well
if (typeof jQuery != "undefined") jQuery.fn.prettyDate = function() {
return this.each(function() {
var date = prettyDate(this.title);
if (date) jQuery(this).text(date);
});
};

Uso:

prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
prettyDate("2007-12-15T22:24:17Z") // => undefined

Extracto del artículo sobre el uso:

Ejemplo de uso

En los ejemplos siguientes hago todos los anclajes en el sitio, que tienen un título con una fecha, tienen una fecha bonita como texto interno. Además, continúo actualizando los enlaces cada 5 segundos después de que la página se haya cargado.

Con JavaScript:

function prettyLinks(){
var links = document.getElementsByTagName("a");
for ( var i = 0; i < links.length; i++ )
if ( links[i].title ) {
var date = prettyDate(links[i].title);
if ( date )
links[i].innerHTML = date;
}
}
prettyLinks();
setInterval(prettyLinks, 5000);

Con jQuery:

$("a").prettyDate();
setInterval(function(){ $("a").prettyDate(); }, 5000);

Faiz: realizó algunos cambios en el código original, correcciones de errores y mejoras.

function prettyDate(time) {
var date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")),
diff = (((new Date()).getTime() - date.getTime()) / 1000),
day_diff = Math.floor(diff / 86400);
var year = date.getFullYear(),
month = date.getMonth()+1,
day = date.getDate();
if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31)
return (
year.toString()+''-''
+((month<10) ? ''0''+month.toString() : month.toString())+''-''
+((day<10) ? ''0''+day.toString() : day.toString())
);
var r =
(
(
day_diff == 0 &&
(
(diff < 60 && "just now")
|| (diff < 120 && "1 minute ago")
|| (diff < 3600 && Math.floor(diff / 60) + " minutes ago")
|| (diff < 7200 && "1 hour ago")
|| (diff < 86400 && Math.floor(diff / 3600) + " hours ago")
)
)
|| (day_diff == 1 && "Yesterday")
|| (day_diff < 7 && day_diff + " days ago")
|| (day_diff < 31 && Math.ceil(day_diff / 7) + " weeks ago")
);
return r;
}

Answer 2

Desde que escribí esta respuesta, una biblioteca muy conocida disponible es moment.js .

Hay moment.js , pero es trivial implementarlo usted mismo. Solo usa un puñado de condiciones.

Supongamos que la date es un objeto Date instanciado para el tiempo que desea comparar.

// Make a fuzzy time
var delta = Math.round((+new Date - date) / 1000);
var minute = 60,
hour = minute * 60,
day = hour * 24,
week = day * 7;
var fuzzy;
if (delta < 30) {
fuzzy = ''just then.'';
} else if (delta < minute) {
fuzzy = delta + '' seconds ago.'';
} else if (delta < 2 * minute) {
fuzzy = ''a minute ago.''
} else if (delta < hour) {
fuzzy = Math.floor(delta / minute) + '' minutes ago.'';
} else if (Math.floor(delta / hour) == 1) {
fuzzy = ''1 hour ago.''
} else if (delta < day) {
fuzzy = Math.floor(delta / hour) + '' hours ago.'';
} else if (delta < day * 2) {
fuzzy = ''yesterday'';
}

Debería adaptar esto para manejar fechas futuras.

Answer 3

Escribí una pequeña biblioteca de fechas que hace esto. Se trata de 2k 136K (46K minimizado), y funciona en navegadores y en Nodo.

moment.js

Es compatible con timeago, formateo, análisis sintáctico, manipulación, i18n, etc.

Además, las cadenas timeago son personalizables, por lo que puedes cambiarlas como mejor te parezca.

Los límites no son los preferidos (5 semanas frente a 1 mes), pero están documentados sobre qué cadenas se utilizan en qué intervalo de tiempo.

Answer 4

Este script js es muy bueno. Todo lo que tienes que hacer es ejecutarlo. Todas las etiquetas <time> se cambiarán a fechas relativas y se actualizarán cada pocos minutos, por lo que la hora relativa siempre estará actualizada.

http://timeago.yarp.com/

Answer 5

Parece que podrías usar http://www.datejs.com/

¡Tienen un ejemplo en la página principal que hace exactamente lo que describes!

EDITAR: En realidad, creo que invertí tu pregunta en mi cabeza. ¡En cualquier caso, creo que podrías comprobarlo ya que es una gran biblioteca de todos modos!

EDITAR x2: Voy a hacer eco de lo que otros han dicho moment.js es probablemente la mejor opción disponible en este momento.

EDITAR x3: no he usado date.js en más de un año. Estoy utilizando exclusivamente momentos para todas mis necesidades relacionadas con la fecha.

Answer 6

aquí un ejemplo de azúcar vs. momento: para un calendario que muestra semanas, necesitaba el último valor de lunes:

moment.js

var m = moment().subtract("days", 1).sod().day(1) // returns a "moment"

sugar.js

var d = Date.past("monday") // returns a js Date object

Prefiero mucho azúcar y después de algunos meses con moment.js ahora cambiar a sugar.js. es más claro y se integra muy bien con la clase de fecha de Javascripts.

Los casos de OP están cubiertos por ambas libs, para sugar.js ver http://sugarjs.com/dates

Answer 7

sugar.js tiene excelentes funciones de formateo de fechas.

No solo eso, sino que también proporciona funciones comunes de uso general, como el formato de cadenas, el formato de números, etc., que son convenientes de usar.