Utilisation de moment.js

Invité · 08/02/2013, 17h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

**danielhagnoul** · 09/02/2013, 11h32

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 11/02/2013, 09h01

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.

**SylvainPV** · 11/02/2013, 18h05

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

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.

Invité · 12/02/2013, 08h38

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**danielhagnoul** · 12/02/2013, 09h14

Bonjour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Utilisation de moment.js

JavaScript

Vue hybride

Discussions similaires

Partager

Partager