web-dev-qa-db-fra.com

Comment utiliser Moment.js?

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

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

En venant à la partie HTML de ma page Web, j'ai deux dates/heures 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>

Date de dernière modification

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

Important! La date relative d'analyse ne devrait pas aller au-delà de "hier". Pour tout ce qui va suivre, les balises <time> devraient afficher les dates et heures exactes qu’elles auraient sans JavaScript, c’est-à-dire que Moment.js ne devrait pas toucher ou analyser les dates passées "hier".

Maintenant, pour que la bibliothèque fasse son travail comme indiqué ci-dessus, je dois appeler une fonction après la référence de la bibliothèque. Alors, la question est, quelle devrait être la fonction? (JQuery convient, car je référence déjà la bibliothèque sur ma page Web.)

javascriptjqueryrelative-datemomentjs
20
its_me

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

Je n'ai jamais utilisé moment.js, mais pour ce qui est de la documentation, c'est assez simple.

Utilisez var now = moment(); comme date actuelle. Ensuite, analysez chaque time- balise 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 remplacez l'heure de votre DOM par votre variable ago.

Mise à jour basée sur le commentaire :

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

Mise à jour le 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
Johannes Klauß

Vous pouvez également utiliser la fonction moment().calendar() , 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 le formatage des dates antérieures à hier ne vous intéresse pas, il suffit de changer les formats de lastWeek et nextWeek au format date-heure complet (par exemple 'L').

UPDATE 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'
  }
});
4
kodkod

Merci à @ JohannesKlauß pour le code. C’est essentiellement ainsi que j’ai exécuté sa réponse et comment je me réfère au code sur mon site Web.

<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 possède 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 réellement éditer moment.min.js et ajouter le code susmentionné directement à la fin. De cette façon, vous enregistrez une requête HTTP supplémentaire. : P

1
its_me

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

  • met à jour tous les éléments avec une classe donnée
  • les tient à jour toutes les minutes (donc 'il y a 1 minute' devient 'il y a 2 minutes')
  • bascule vers un format différent dans + -1 jour (par exemple 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 SC 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);

})();
1
Scott Davey