Comment utiliser Moment.js?

je ne suis pas en mesure de suivre le Moment.js documentation, et j'ai besoin d'aide pour la mettre en place. J'ai fait référence à l' moment.min.js le fichier correctement sur ma page web comme ceci:

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

venant à la partie HTML de ma page Web, j'ai deux datetime différents sur la même page:

Date De Publication

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

Date De La Dernière Modification

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

Important! l'analyse de la date relative ne devrait pas aller au-delà de "hier". Comme pour tout, au-delà, le <time> les tags doivent afficher les dates exactes qu'ils afficheraient sans le JavaScript, c'est-à-dire le Moment.js ne devrait pas toucher ou analyser des dates qui sont passées "hier".

maintenant, pour que la bibliothèque fasse son travail comme mentionné ci-dessus, j'ai besoin d'appeler une fonction après la référence de la bibliothèque. Donc, la question Est, quelle devrait être la fonction? (Utiliser jQuery est très bien, car je fais déjà référence à la bibliothèque sur ma page web.)

20
demandé sur Dave Cousineau 2012-06-10 13:51:10

4 réponses

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

je n'ai jamais utilisé instant.mais d'après les médecins, c'est assez simple.

Utiliser var now = moment(); comme votre date actuelle. Ensuite d'analyser tous les time-Balise dans votre DOM var time = moment($(e).attr('datetime'));

Pour vérifier la différence utiliser le diff() méthode:

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

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

mise à Jour basé sur commentaire:

Ok, pas 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>');
    }
});
20
répondu Johannes Klauß 2012-06-10 12:07:20

vous pouvez aussi utiliser le moment().calendar() fonction, qui formatera pour vous les dates proches d'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, changez simplement les formats de lastWeek et nextWeek au format complet date-heure (par exemple 'L').

mise à jour 2013-09-06 apparemment il a un nouvelle syntaxe qui vous permet aussi 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'
  }
});
4
répondu kodkod 2013-09-06 19:12:22 
<script src="/js/moment.min.js"></script>
<script src="/js/moment.executor.js"></script>

Où moment.min.js est le Moment.bibliothèque js, et moment.exécuteur.js avec ce code (avec l'aimable autorisation 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 en fait éditer moment.min.js et y ajouter le code mentionné ci-dessus, à la fin. De cette façon, vous serez en enregistrement D'une requête HTTP supplémentaire. :P

1
répondu its_me 2012-06-10 12:52:09

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

  • mises à jour de tous les éléments avec une classe donnée
  • les tient à jour à chaque minute (donc '1 minute ago' devient '2 minutes ago')
  • passe à un format différent quand + -1 jour à partir de maintenant (par exemple mardi dernier à 11:45 PM)

Voici un JSFiddle pour vous de jouer avec.

votre HTML:

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

Les JS à 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);

})();
1
répondu Scott Davey 2014-08-04 02:17:45