122 votes

Bibliothèque Javascript pour l'homme convivial par rapport formatage de la date

J'aimerais afficher des dates par rapport à la date actuelle dans un format convivial.

Des exemples de l'homme convivial dates relatives:

  • Il y a 10 secondes
  • 20 minutes à partir de maintenant
  • Il y a 1 jour
  • Il y a 5 semaines
  • Il y a 2 mois

Fondamentalement, en préservant le plus élevé de l'ordre de grandeur (et de préférence, seulement un changement de vitesse des unités lors du passage de 2 de ces unités - 5 semaines au lieu de 1 mois).

Si je pouvais vivre avec une bibliothèque qui avait moins de contrôle et encore plus convivial dates comme:

  • hier
  • demain
  • la semaine dernière
  • il y a quelques minutes
  • dans quelques heures

Toutes les bibliothèques populaires pour cette?

115voto

alex Points 186293

Depuis, j'ai écrit cette réponse, le meilleur de la bibliothèque est disponible moment.js.

103voto

timrwood Points 5446

J'ai écrit un petit jour de la bibliothèque qui fait cela. C'est environ 2k, et fonctionne dans les navigateurs et dans le Nœud.

moment.js

Il prend en charge timeago, mise en forme, l'analyse, la manipulation, i18n, etc.

Aussi, le timeago chaînes sont personnalisables, vous pouvez changer la façon dont vous voyez l'ajustement.

Les seuils ne sont pas comme vous préférez (5 semaines ou 1 mois), mais ils sont documentés sur les chaînes qui sont utilisés dans quel intervalle de temps.

21voto

Floyd Pink Points 4438

Voici quelque chose de la John Resig - http://ejohn.org/blog/javascript-pretty-date/

EDIT (6/27/2014): Suite à l'observation de Sumurai8 - si le lien fonctionne toujours, voici l'extrait de l' pretty.js liés à partir de l'article ci-dessus:

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

Utilisation:

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

Extrait de l'article sur l'utilisation:

Exemple D'Utilisation

Dans les exemples suivants, je fais tous les ancres sur le site, que avoir un titre avec une date, un joli jour que de leur intérieur texte. En outre, je continue à mettre à jour les liens, toutes les 5 secondes une fois la page chargée.

Avec Le 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);

Avec jQuery:

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

17voto

Hendy Irawan Points 4635

sugar.js a la grande date de fonctions de mise en forme.

Non seulement cela, il fournit également de l'objectif général commun des fonctions comme la mise en forme de chaîne, le numéro de mise en forme, etc. qui sont pratiques à utiliser.

4voto

Robodude Points 1777

On dirait que vous pourriez utiliser http://www.datejs.com/

Ils ont un exemple sur la page principale, qui fait exactement ce que vous décrivez!

EDIT: en Fait, je crois que j'ai inversé votre question dans ma tête. En tout cas, je pense que vous pourriez le vérifier car il est vraiment une grande bibliothèque de toute façon!

EDIT x2: je vais faire l'écho de ce que les autres ont dit http://momentjs.com/ est probablement le meilleur choix disponible.

EDIT x3: je n'ai pas utilisé date.js en plus d'un an. Je suis exclusivement à l'aide de momentjs pour tous mes liées à la date de besoins.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X