Come utilizzare Moment.js?

Question

Non riesco a seguire lo Moment.js documentation e ho bisogno di aiuto per la configurazione. Ho fatto riferimento il file moment.min.js correttamente sulla mia pagina web in questo modo:

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

Venendo alla parte HTML della mia pagina web, ho due datetime diversi di sulla stessa pagina:

Pubblicato Data

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

Ultima modifica Data

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

Importante! L'analisi della data relativa non deve andare oltre "ieri". Per quanto riguarda tutto ciò che è oltre, i tag <time> dovrebbero visualizzare il tempo esatto esatto che avrebbero senza il JavaScript, ad esempio Moment.js non dovrebbe toccare o analizzare le date che sono "ieri" passate.

Ora, per fare in modo che la libreria faccia il suo lavoro come sopra, devo chiamare una funzione dopo il riferimento della libreria. Quindi, la domanda è, quale dovrebbe essere la funzione? (Usare jQuery va bene, dato che ho già fatto riferimento alla libreria sulla mia pagina web.)

Answer 1

Si prega di specificare la domanda. Suppongo che tu voglia un parsing relativo alla data e il massimo dovrebbe essere "ieri".

Non ho mai usato moment.js, ma per quanto dicono i documenti, è piuttosto semplice.

Utilizzare var now = moment(); come data corrente. Quindi analizzare ogni time -Tag nel DOM con var time = moment($(e).attr('datetime'));

Per controllare la differenza di utilizzare il metodo diff():

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

Usa var ago = now.from(time) per ottenere il risultato relativo e sostituire il tempo nella tua DOM con la variabile ago.

aggiornamento sulla base di un commento:

Ok, bene non testato, ma questo è l'idea di base:

Aggiornato il codice.

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

Answer 2

Grazie a @ JohannesKlauß per il codice. Questo è fondamentalmente il modo in cui ho eseguito la sua risposta e come faccio a fare riferimento al codice sul mio sito web.

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

Dove, moment.min.js è la biblioteca Moment.js, e moment.executor.js ha questo codice (per gentile concessione di 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 : È possibile modificare effettivamente moment.min.js e aggiungi il codice di cui sopra direttamente alla fine. In questo modo, salvi una richiesta HTTP aggiuntiva. : P

Answer 3

È inoltre possibile utilizzare la funzione moment().calendar(), che sarà formato per voi date vicine ad oggi (fino ad una settimana a partire da oggi):

$('time').each(function(i, e) { 
    var time = moment($(e).attr('datetime')); 

    $(e).html('<span>' + time.calendar() + '</span>'); 
});​ 

È possibile personalizzare le stringhe di formato con questo codice:

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' 
}; 

Se non siete interessati a formattazione date prima di ieri, basta cambiare i formati di lastWeek e nextWeek al formato della data-tempo pieno (ad es 'L').

---

UPDATE 2013/09/06 A quanto pare ha una nuova sintassi che consente anche di localizzarlo:

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

Answer 4

estensione @ di its_me implementazione sopra, ecco una versione che

• aggiorna tutti gli elementi con una determinata classe
• li mantiene aggiornati ogni minuto (quindi '1 minuto fa' b ecomes '2 minuti fa')
• passa a un formato diverso quando + -1 giorno da oggi (ad es. Ultimo martedì alle 23:45)

Ecco uno JSFiddle con cui giocare.

tuo HTML:

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

Il JS da includere:

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

})();