Utilisation de moment.js

Version imprimable

08/02/2013, 17h26
Invité

Utilisation de moment.js

Bonjour,

J'affiche pour me sur me page une liste d'article avec leur date de publication.
Les dates sont enregistré et affiché au format timestamp

Code:

<span id="date">2012-04-11 15:12:45</span>

Je pensais utiliser moment.js pour qu'a l'affichage ces dates soit converti pour être affiché dans un format : il y a N jours/mois/années.

Le problème est que je ne sais absolument pas moment.js, sur leur site il y a de beaux exemples, une jolie doc, mais pas d'exemple concret pouvant m'aider.

Quelqu'un serait il comment faire ?

Merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
moment.lang( "fr", {
    months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
    monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
    weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
    weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
    weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
    longDateFormat : {
        LT : "HH:mm",
        L : "DD/MM/YYYY",
        LL : "D MMMM YYYY",
        LLL : "D MMMM YYYY LT",
        LLLL : "dddd D MMMM YYYY LT"
    },
    calendar : {
        sameDay: "[Aujourd'hui à] LT",
        nextDay: '[Demain à] LT',
        nextWeek: 'dddd [à] LT',
        lastDay: '[Hier à] LT',
        lastWeek: 'dddd [dernier à] LT',
        sameElse: 'L'
    },
    relativeTime : {
        future : "dans %s",
        past : "il y a %s",
        s : "quelques secondes",
        m : "une minute",
        mm : "%d minutes",
        h : "une heure",
        hh : "%d heures",
        d : "un jour",
        dd : "%d jours",
        M : "un mois",
        MM : "%d mois",
        y : "une année",
        yy : "%d années"
    },
    ordinal : function (number) {
        return number + (number === 1 ? 'er' : 'ème');
    },
    week : {
        dow : 1, // Monday is the first day of the week.
        doy : 4  // The week that contains Jan 4th is the first week of the year.
    }
});
 
console.log( moment( "2012-04-11 15:12:45" ).startOf( "day" ).fromNow() );

11/02/2013, 09h01
Invité

Bonjour et merci d'avoir pris le temps de poster une réponse.
Cependant même en faisant bêtement un copier coller du script que tu me donnes, je n'arrive toujours pas à afficher les 4 dates de ma page dans un format qui me convient mieux.
11/02/2013, 18h05
SylvainPV

Eh bien il suffit de ne pas faire bêtement un copier-coller :mrgreen:

Regarde la dernière ligne du code de daniel, il te montre un exemple d'utilisation pour faire ce que tu souhaites. Le reste du code est la langue FR pour moment.js pour afficher "il y a 3 jours" et non "3 days ago". La doc pour le changement de langue est ici : http://momentjs.com/docs/#/i18n/changing-language/ ; en gros, exécute ce code juste après moment.js (tu peux même l'ajouter à la suite si tu veux) et la langue FR sera déclarée et utilisée.

Rafff, toujours rien pigé sur l'utilisation de moment.js
Ce que j'ai fait ne fonctionne pas, l'exemple non plus et mes dates ne change pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Moment</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="moment.js"></script>
		<script>
			moment.lang( "fr", {
			months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
			monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
			weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
			weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
			weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
			longDateFormat : {
				LT : "HH:mm",
				L : "DD/MM/YYYY",
				LL : "D MMMM YYYY",
				LLL : "D MMMM YYYY LT",
				LLLL : "dddd D MMMM YYYY LT"
			},
			calendar : {
				sameDay: "[Aujourd'hui à] LT",
				nextDay: '[Demain à] LT',
				nextWeek: 'dddd [à] LT',
				lastDay: '[Hier à] LT',
				lastWeek: 'dddd [dernier à] LT',
				sameElse: 'L'
			},
			relativeTime : {
				future : "dans %s",
				past : "il y a %s",
				s : "quelques secondes",
				m : "une minute",
				mm : "%d minutes",
				h : "une heure",
				hh : "%d heures",
				d : "un jour",
				dd : "%d jours",
				M : "un mois",
				MM : "%d mois",
				y : "une année",
				yy : "%d années"
			},
			ordinal : function (number) {
				return number + (number === 1 ? 'er' : 'ème');
			},
			week : {
				dow : 1, // Monday is the first day of the week.
				doy : 4  // The week that contains Jan 4th is the first week of the year.
			}
			});
		</script>
 
	</head>
	<body>
 
<h1>Date de publication</h1>
Article 1 : <span class="datepub">2013-02-11 15:12:45</span><br/>
Article 2 : <span class="datepub">2012-08-12 15:12:45</span><br/>
Article 3 : <span class="datepub">2011-04-20 15:12:45</span><br/>
Article 4 : <span class="datepub">2010-05-07 15:12:45</span>
 
<span span class="datepub"><script>console.log( moment( "2012-04-11 15:12:45" ).startOf( "day" ).fromNow() );	</script></span>
 
	</body>
</html>

Bonjour

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<title>Moment</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="moment.js"></script>
	<script>
		moment.lang( "fr", {
		months : "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),
		monthsShort : "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),
		weekdays : "dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),
		weekdaysShort : "dim._lun._mar._mer._jeu._ven._sam.".split("_"),
		weekdaysMin : "Di_Lu_Ma_Me_Je_Ve_Sa".split("_"),
		longDateFormat : {
			LT : "HH:mm",
			L : "DD/MM/YYYY",
			LL : "D MMMM YYYY",
			LLL : "D MMMM YYYY LT",
			LLLL : "dddd D MMMM YYYY LT"
		},
		calendar : {
			sameDay: "[Aujourd'hui à] LT",
			nextDay: '[Demain à] LT',
			nextWeek: 'dddd [à] LT',
			lastDay: '[Hier à] LT',
			lastWeek: 'dddd [dernier à] LT',
			sameElse: 'L'
		},
		relativeTime : {
			future : "dans %s",
			past : "il y a %s",
			s : "quelques secondes",
			m : "une minute",
			mm : "%d minutes",
			h : "une heure",
			hh : "%d heures",
			d : "un jour",
			dd : "%d jours",
			M : "un mois",
			MM : "%d mois",
			y : "une année",
			yy : "%d années"
		},
		ordinal : function (number) {
			return number + (number === 1 ? 'er' : 'ème');
		},
		week : {
			dow : 1, // Monday is the first day of the week.
			doy : 4  // The week that contains Jan 4th is the first week of the year.
		}
		});
	</script>
</head>
<body> 
	<h1>Date de publication</h1>
 
	Article 1 : <span class="datepub">2013-02-11 15:12:45</span><br/>
	Article 2 : <span class="datepub">2012-08-12 15:12:45</span><br/>
	Article 3 : <span class="datepub">2011-04-20 15:12:45</span><br/>
	Article 4 : <span class="datepub">2010-05-07 15:12:45</span>
 
	<script>
		$( function(){
 
			$( "span.datepub" ).each( function( i, item ){
				$( item ).append( " ; " + moment( $( item ).text() ).startOf( "day" ).fromNow() );
			});
 
		});
	</script>
</body>
</html>

12/02/2013, 09h33
Invité

Bonjour et merci pour avoir répondu.

Juste une chose, en l'état le timestamp est aussi affiché alors que je souhaiterais avoir que le temps écoulé.

Lors de mes recherches sur le net, j'ai vu qu'il était possible de passer la date dans un attribut dans ce style :

Code:

<span class="datepub" datetime="2010-05-07 15:12:45"></span>

Comment le mettre en place dans votre exemple ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body> 
	<h1>Date de publication</h1>
 
	Article 1 : <span class="datepub" datetime="2013-02-11 15:12:45"></span><br/>
	Article 2 : <span class="datepub" datetime="2012-08-12 15:12:45"></span><br/>
	Article 3 : <span class="datepub" datetime="2011-04-20 15:12:45"></span><br/>
	Article 4 : <span class="datepub" datetime="2010-05-07 15:12:45"></span>
 
	<script>
		$( function(){
 
			$( "span.datepub" ).each( function( i, item ){
				$( item ).text( moment( $( item ).attr( "datetime") ).startOf( "day" ).fromNow() );
			});
 
		});
	</script>
</body>

12/02/2013, 10h01
Invité

Milles milliard de mercis :P
12/02/2013, 20h58
SylvainPV

Essaie de comprendre les éléments qu'on te donne... console.log comme son nom l'indique écrit un log dans la console Javascript. Ce n'est pas ça qui va changer le contenu de ta page, c'est juste pour te montrer comment te servir de moment.js ; pour le reste, c'est du Javascript basique.