Libreria Javascript per la formattazione della data relativa a misura umana

Mi piacerebbe visualizzare alcune date relative alla data corrente in un formato a misura umana.

Esempi di date relative per l’uomo:

  • 10 secondi fa
  • 20 minuti da ora
  • 1 giorno fa
  • 5 settimane fa
  • 2 mesi fa

Sostanzialmente fedelmente mantenendo il più alto ordine di grandezza (e, preferibilmente, spostando solo le unità quando si superano 2 di quelle unità – 5 settimane invece di 1 mese).

Anche se potrei vivere con una biblioteca che ha meno controllo e date ancora più amichevoli come:

  • ieri
  • Domani
  • la settimana scorsa
  • pochi minuti fa
  • tra un paio d’ore

Qualche libreria popolare per questo?

Da quando ho scritto questa risposta, una libreria ben nota disponibile è moment.js .


Ci sono librerie disponibili , ma è banale implementarle tu stesso. Basta usare una manciata di condizioni.

La date assunzione è un object Date istanziato per l’ora in cui si desidera effettuare un confronto.

 // 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'; } 

Dovresti adattare questo per gestire le date future.

Ho scritto una piccola biblioteca di date che fa questo. È circa 2k 136K (ridotto a 46K) e funziona nei browser e nel nodo.

moment.js

Supporta timeago, formattazione, analisi, manipolazione, i18n, ecc.

Inoltre, le stringhe di timeago sono personalizzabili, quindi puoi cambiarle come meglio credi.

I limiti non sono quelli che preferiresti (5 settimane contro 1 mese), ma sono documentati su quali stringhe vengono utilizzate in quale intervallo di tempo.

sugar.js ha ottime funzioni di formattazione della data.

Non solo, fornisce anche funzioni di uso generale comuni come la formattazione di stringhe, la formattazione dei numeri, ecc. Che sono convenienti da usare.

Ecco qualcosa da John Resig – http://ejohn.org/blog/javascript-pretty-date/

EDIT (27/06/2014): seguito del commento di Sumurai8 – sebbene la pagina collegata funzioni ancora, ecco l’estratto per pretty.js collegato all’articolo precedente:

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 

Estratto dall'articolo sull'utilizzo:

Esempio di utilizzo

Negli esempi che seguono faccio tutti gli ancore sul sito, che hanno un titolo con una data in esso, hanno una bella data come loro testo interno. Inoltre, continuo ad aggiornare i collegamenti ogni 5 secondi dopo il caricamento della pagina.

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: apportato alcune modifiche al codice originale, correzioni di bug e miglioramenti.

 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; } 

ecco un esempio di zucchero vs momento: per un calendario che visualizza settimane, avevo bisogno dell’ultimo valore del lunedì:

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 

Preferisco di gran lunga lo zucchero e dopo alcuni mesi con moment.js ora passa a sugar.js. è più chiaro e si integra bene con la class Date di Javascripts.

I casi di OP sono coperti da entrambe le librerie, per sugar.js vedere http://sugarjs.com/dates

Sembra che tu possa usare http://www.datejs.com/

Hanno un esempio sulla pagina principale che fa esattamente quello che stai descrivendo!

EDIT: In realtà, penso di aver invertito la tua domanda nella mia testa. In ogni caso, penso che potresti verificarlo dato che è comunque una grande biblioteca!

EDIT x2: ho intenzione di echeggiare quello che gli altri hanno detto http://momentjs.com/ è probabilmente la migliore scelta disponibile al momento.

EDIT x3: non ho usato date.js in più di un anno. Uso esclusivamente momentjs per tutte le mie esigenze relative alle date.

Questo script js è molto carino. Tutto quello che devi fare è eseguirlo. Tutti i tag verranno modificati in date relative e aggiornati ogni pochi minuti, quindi il tempo relativo sarà sempre aggiornato.

http://timeago.yarp.com/