Affichage agréable d'une date de publication (en anglais)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 064 fois - Téléchargée 18 fois

Contenu du snippet

Cette fonction adapte le texte de la date selon son ancienneté, avec une expression plus sympathique.

Exemples:
- 34 minutes ago
- Yesterday at 09:16 am
- Monday, 2nd April

A la question "pourquoi afficher une date en javascript plutôt que en dur dans le code HTML ?", je répondrais que çà permet d'adapter les heures au fuseau horaire de l'internaute ;o) .oO(étudiez l'astuce des SPAN avec la classe PubDate des Life-Lines)

Source / Exemple :


function elapsedTimeString(Day0)
	{
	var Days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
	var Months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

	var Year0 = Day0.getFullYear();
	var MonthNr0 = Day0.getMonth()+1;
	var DayNr0 = Day0.getDate();
	var Hours0 = Day0.getHours();
	var Minutes0 = Day0.getMinutes();
	var Seconds0 = Day0.getSeconds();
	var TimeStamp0 = Date.UTC(Year0,MonthNr0-1,DayNr0,Hours0,Minutes0,Seconds0);
	
	var Day1 = new Date();
	var Year1 = Day1.getFullYear();
	var MonthNr1 = Day1.getMonth()+1;
	var DayNr1 = Day1.getDate();
	var Hours1 = Day1.getHours();
	var Minutes1 = Day1.getMinutes();
	var Seconds1 = Day1.getSeconds();
	var TimeStamp1 = Date.UTC(Year1,MonthNr1-1,DayNr1,Hours1,Minutes1,Seconds1);
	
	var Ecart = TimeStamp1 - TimeStamp0;
	if (Ecart <= 0)
		{
		return 'today';
		}
	else if (Ecart <= 1000 * 60)
		{
		return Math.round(Ecart / 1000)+'s ago';
		}
	else if (Ecart <= 1000 * 60 * 60)
		{
		return Math.round(Ecart / (1000*60))+'min ago';
		}
	else if ((Ecart <= 1000 * 60 * 60 *24) && (DayNr1 == DayNr0))
		{
		ElapsedHours = Math.round(Ecart / (1000*60*60));
		if (ElapsedHours == 1)
			{
			return '1 hour ago';
			}
		else
			{
			return ElapsedHours+'hours ago';
			}
		}
	else
		{
		var HoursOP = Hours0;
		var ampmOP = "am";
		if (HoursOP == 0) HoursOP = 12;
		if (HoursOP > 11)
			ampmOP = "pm";
		if (HoursOP > 12)
			HoursOP -= 12;
		HoursOP = leading2Zero(HoursOP);
		var MinutesOP = leading2Zero(Minutes0);
		
		if (Ecart <= (1000 * 60 * 60 * 24))
			{
			return 'yesterday at ' + HoursOP + ':' + MinutesOP + ' ' + ampmOP;
			}
		else
			{
			var DayName0 = Days[Day0.getDay()];
			if (Ecart <= (1000 * 60 * 60 * 24 * 7))
				{
				return DayName0+' at ' + HoursOP + ':' + MinutesOP + ' ' + ampmOP;
				}
			else
				{
				var MonthName0 = Months[MonthNr0-1];
				var DaySuffix = 'th';
				if (DayNr0 == 1) DaySuffix = 'st'
				else if (DayNr0 == 2) DaySuffix = 'nd'
				else if (DayNr0 == 3) DaySuffix = 'rd';
					
				if (Year0 == Year1)
					{
					return DayName0+', '+DayNr0+DaySuffix+' '+MonthName0;
					}
				else
					{
					return DayName0+', '+DayNr0+DaySuffix+' '+MonthName0+' '+Year0;
					}
				}
			}
		}
	}

function leading2Zero(nr)
	{
	if (nr < 10) nr = "0" + nr;
	return nr;
	}

Conclusion :


Créé pour les besoins des profils LiFE-Line sur www.life2front.com

A voir également

Ajouter un commentaire

Commentaires

dzik
Messages postés
1
Date d'inscription
vendredi 23 juillet 2004
Statut
Membre
Dernière intervention
21 juillet 2007
-
j ai une page perso sur laquelle j ai pris l habitude d inscrire la date de mise a jour...

je t avoue que j ai eu un peu de mal a trouver comment je pourrais utiliser ce code pr rendre l'information plus sympatique. Donc si d autres on le meme probleme:

la date actuelle peut etre donc etre obtenue en ecrivant sur une page dummy.html:

<script type="text/javascript">document.write(''+new Date());</script>

et cette chaine peut etre reutilisee par le script via:

<script type="text/javascript">document.write(elapsedTimeString(new Date(Date.parse('string_date'))))</script>

voila pr le complement d'information
cs_olid
Messages postés
296
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
28 janvier 2008
-
Domj, oui... Fait attention au reste pour les vieilles dates.

Il me semblait utile de partager la version anglaise où les dates et heures sont affichées avec des caractéristiques propres à cette langue ; comme l'heure sur 12 heures avec les AM/PM, et le suffixe du jour du mois.
cs_DomJ
Messages postés
140
Date d'inscription
dimanche 4 décembre 2005
Statut
Membre
Dernière intervention
3 décembre 2013
1 -
Salut
# {
# return ElapsedHours+'hours ago';
# }
Ça veut dire que si tu transformes en
# {
# return 'Il y a '+ElapsedHours+'heures';
# }
Ce sera simplement en français?
Note qu'il faut modifier toutes les autres places, la mienne était un exemple.
mais pourquoi as-tu mis ce script en anglais?
Magius
Messages postés
3
Date d'inscription
dimanche 16 janvier 2005
Statut
Membre
Dernière intervention
9 juillet 2007
-
de rien, grosse quiche lol :-)
cs_olid
Messages postés
296
Date d'inscription
lundi 2 septembre 2002
Statut
Membre
Dernière intervention
28 janvier 2008
-
Oups, effectivement, je suis une grosse quiche en anglais... Merci pour tes remarques ;o) .oO(voilà une bonne raison de partager ses sources)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.