Comment utiliser Moment.js?

Je ne peux pas suivre la documentation Moment.js , et j'ai besoin d'aide pour la configurer. J'ai référencé le fichier moment.min.js correctement sur ma page Web comme moment.min.js :

 <script src="/js/moment.min.js"></script> 

En arrivant à la partie HTML de ma page Web, j'ai deux dates différentes sur la même page:

date de publication

 <time class="pubdate" datetime="2012-06-09T12:32:10-04:00" pubdate> June 09, 2012 </time> 

Dernière date modifiée

 <time class="updated" itemprop="dateModified" datetime="2012-06-09T12:32:10-04:00"> June 9, 2012 ~ 12:32 </time> 

Important! L'analyse par date relative ne doit pas dépasser "hier". En ce qui concerne tout au-delà, les balises <time> devraient afficher l'heure de la date exacte, sans le JavaScript, c'est-à-dire Moment.js ne devrait pas toucher ou analyser des dates qui sont passées "hier".

Maintenant, pour faire fonctionner la bibliothèque comme mentionné ci-dessus, je dois appeler une fonction après la référence de la bibliothèque. Donc, la question est: quelle devrait être la fonction? (L'utilisation de jQuery est bien, car je fais déjà référence à la bibliothèque sur ma page Web.)

Veuillez préciser votre question. Je suppose que vous voulez une analyse par date relative et que le maximum devrait être "hier".

Je n'ai jamais utilisé le moment.js, mais dans la mesure où les docs disent, c'est assez simple.

Utilisez var now = moment(); Comme date actuelle. Ensuite, analysez chaque time -Tag dans votre DOM avec var time = moment($(e).attr('datetime'));

Pour vérifier la différence, utilisez la méthode diff() :

 if(now.diff(time, 'days') <= 1) { // getting the relative output } 

Utilisez var ago = now.from(time) pour obtenir la sortie relative et remplacer le temps dans votre DOM par votre variable.

Mise à jour en fonction des commentaires :

D'accord, bien non testé, mais c'est l'idée de base:

Mise à jour du code.

 var now = moment(); $('time').each(function(i, e) { var time = moment($(e).attr('datetime')); if(now.diff(time, 'days') <= 1) { $(e).html('<span>' + time.from(now) + '</span>'); } }); 

Vous pouvez également utiliser la fonction moment().calendar() , qui vous formateront les dates proches aujourd'hui (jusqu'à une semaine à partir d'aujourd'hui):

 $('time').each(function(i, e) { var time = moment($(e).attr('datetime')); $(e).html('<span>' + time.calendar() + '</span>'); });​ 

Vous pouvez personnaliser les chaînes de format avec ce code:

 moment.calendar = { lastDay : '[Yesterday at] LT', sameDay : '[Today at] LT', nextDay : '[Tomorrow at] LT', lastWeek : '[last] dddd [at] LT', nextWeek : 'dddd [at] LT', sameElse : 'L' }; 

Si vous n'êtes pas intéressé par le formatage des dates avant hier, modifiez les formats de la dernière lastWeek et du lastWeek nextWeek de la date et de l'heure (par exemple, 'L' ).


MISE À JOUR 2013-09-06 Apparemment, il a une nouvelle syntaxe qui vous permet également de la localiser:

 moment.lang('en', { calendar: { lastDay : '[Yesterday at] LT', sameDay : '[Today at] LT', nextDay : '[Tomorrow at] LT', lastWeek : '[last] dddd [at] LT', nextWeek : 'dddd [at] LT', sameElse : 'L' } }); 

Merci à @ JohannesKlauß pour le code. C'est essentiellement la façon dont j'ai exécuté sa réponse et comment je fais référence au code sur mon site.

 <script src="/js/moment.min.js"></script> <script src="/js/moment.executor.js"></script> 

Où, moment.min.js est la bibliothèque Moment.js, et moment.executor.js a ce code (avec la permission de Johannes):

 jQuery(document).ready(function($){ var now = moment(); $('time').each(function(i, e) { var time = moment($(e).attr('datetime')); if(now.diff(time, 'days') <= 1) { $(e).html('<span>' + time.from(now) + '</span>'); } }); }); 

PS: Vous pouvez effectivement modifier moment.min.js et ajouter le code mentionné ci-dessus, à la fin. De cette façon, vous sauvegarderez une requête HTTP supplémentaire. : P

Extension de l'implémentation de @ its_me ci-dessus, voici une version qui

  • Met à jour tous les éléments avec une classe donnée
  • Les maintient à jour toutes les minutes (donc 'il y a 1 minute' devient 'il y a 2 minutes')
  • Passe à un format différent quand + -1 jours à partir de maintenant (p. Ex. Mardi dernier à 23h45)

Voici un jSFiddle pour vous de jouer avec.

Votre HTML:

 <time class="cw-relative-date" datetime="2014-06-09T12:32:10-00:00"></time> 

Le JS doit inclure:

 (function () { // Define a function that updates all relative dates defined by <time class='cw-relative-date'> var updateAllRelativeDates = function() { $('time').each(function (i, e) { if ($(e).attr("class") == 'cw-relative-date') { // Initialise momentjs var now = moment(); moment.lang('en', { calendar : { lastDay : '[Yesterday at] LT', sameDay : '[Today at] LT', nextDay : '[Tomorrow at] LT', lastWeek : '[Last] dddd [at] LT', nextWeek : 'dddd [at] LT', sameElse : 'D MMM YYYY [at] LT' } }); // Grab the datetime for the element and compare to now var time = moment($(e).attr('datetime')); var diff = now.diff(time, 'days'); // If less than one day ago/away use relative, else use calendar display if (diff <= 1 && diff >= -1) { $(e).html('<span>' + time.from(now) + '</span>'); } else { $(e).html('<span>' + time.calendar() + '</span>'); } } }); }; // Update all dates initially updateAllRelativeDates(); // Register the timer to call it again every minute setInterval(updateAllRelativeDates, 60000); })();