Jak korzystać z pliku Moment.js?

Question

Nie mogę wykonać polecenia Moment.js documentation i potrzebuję pomocy przy jego konfigurowaniu. Mam odwoływać plik moment.min.js poprawnie na mojej stronie internetowej tak:

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

Jadąc do strony HTML mojej stronie, mam dwie różne datetime jest na tej samej stronie:

Opublikowane Data

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

Ostatnia modyfikacja Data

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

Ważne! Parsowanie daty względnej nie powinno wykraczać poza "wczoraj". Jeśli chodzi o wszystko, co poza nim, znaczniki <time> powinny wyświetlać dokładną datę i godzinę bez JavaScriptu - tzn. Moment.js nie powinien dotykać ani parsować dat, które minęły "wczoraj".

Teraz, aby biblioteka spełniała swoje zadanie, jak wyżej wspomniano, muszę wywołać funkcję po odwołaniu do biblioteki. Tak więc pytanie brzmi, jaka powinna być funkcja? (Używanie jQuery jest w porządku, ponieważ już odwołuję się do biblioteki na mojej stronie.)

Answer 1

Proszę podać swoje pytanie. Zakładam, że chcesz analizować względną datę, a maksymalna powinna być "wczoraj".

Nigdy nie używałem pliku moment.js, ale jeśli chodzi o dokumentację, jest to całkiem proste.

Użyj var now = moment(); jako swojej aktualnej daty. Następnie zanalizować każdy time -tag w DOM z var time = moment($(e).attr('datetime'));

Aby sprawdzić różnicę użyć metody diff():

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

Zastosowanie var ago = now.from(time) dostać wyjście względny czas i wymienić w swoim DOM ze zmienną ago.

Aktualizacja oparta na komentarz:

Dobrze, dobrze przetestowane, ale to podstawowa idea:

Zaktualizowany kod.

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

Dzięki @ JohannesKlauß kodu. Zasadniczo wykonałem jego odpowiedź i sposób, w jaki odwołuję się do kodu na mojej stronie internetowej.

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

Gdzie, moment.min.js jest bibliotekę Moment.js i moment.executor.js ma ten kod (dzięki uprzejmości 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 : Możesz faktycznie edytować moment.min.js i dodaj na końcu wyżej wymieniony kod. W ten sposób zaoszczędzisz jedno dodatkowe żądanie HTTP. : P

Answer 3

Można również użyć funkcji moment().calendar(), który sformatuje dla ciebie terminach blisko do dzisiaj (do tygodnia od dzisiaj):

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

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

Można dostosować ciągi formatu z tym kodem:

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

Jeżeli nie jesteś zainteresowany w formatowaniu dat przed wczoraj, wystarczy zmienić formaty lastWeek i nextWeek do pełnego formatu daty i czasu (np 'L').

---

UPDATE 06.09.2013 Podobno ma nową składnię, które również pozwala na zlokalizowanie go:

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

Wydłużenie @ its_me za realizację powyższego, oto wersja

• aktualizuje wszystkie elementy o danej klasie
• aktualizuje je co minutę (czyli "1 minutę temu" b ecomes "2 minuty temu")
• przełącza się na inny format, gdy + -1 dzień od teraz (np. Ostatni wtorek o 23:45)

Oto JSFiddle do zabawy.

Twój HTML:

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

JS obejmuje:

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

})();