Calcul de temps à la Facebook ou Twitter

Temps de lecture : < 1 minute

Si vous avez déjà développé un chat, un livre d’or ou tout autre type de moyen de feedback, vous avez été confronté au problème de l’affichage de la date de publication du message. Comment faire pour qu’elle soit affichée sans avoir une date classique et barbante comme : 29/06/2011 15h26 mais plutôt quelque chose du style : « il y a moins d’une minute », comme le font Twitter ou Facebook par exemple ?

On imagine déjà du parsage, des algos…
Eh bien en fait oui, mais pas besoin de le faire vous-mêmes, timeago peut le faire à votre place.

On pourra apprécier la simplicité d’utilisation du plugin, pour un résultat assez simple mais correct.

Voici l’utilisation la plus utile que l’on peut faire du plugin.

<html>
	<head>
		http://jquery.min.js
		http://timeago.js
		<script>
			$(document).ready(function() {
			jQuery("abbr.timeago").timeago();
			});
		</script>
	</head>
	<body>
		<abbr class="timeago" title="July 17, 2008">2 years ago</abbr> <br/>
		<abbr class="timeago" title="2011-06-17">2 years ago</abbr> <br/>
		<abbr class="timeago" title="2011-01-17T09:24:17Z">2 years ago</abbr>
		<hr/>
	</body>
</html>

Le résultat obtenu (aujourd’hui) est le suivant :

  • Il y a 2 ans
  • Il y a 12 jours
  • Il y a 5 mois

Vous remarquerez au passage l’utilisation de différents types de format de date.

Afin d’avoir le résultat en français j’ai traduit les quelques mots clés contenu dans la librairie. L’archive que je propose contient donc la version française.

La petite particularité est l’option :

jQuery.timeago.settings.allowFuture = true;

Qui permet de faire une sorte de décompte pour un évènement. Je n’ai pas encore trouvé d’application pertinente mais il y a de l’idée 😛

Précédent

Gestionnaire de fichiers en ligne : elFinder

Suivant

Convertir des formules Latex en HTML

  1. iBarker

    Merci, je cherchais justement un système comme celui l 🙂

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Fièrement propulsé par WordPress & Thème par Anders Norén