Moment.js nasıl kullanılır?

Question

Moment.js documentation ürününü takip edemiyorum ve kurulumu konusunda yardıma ihtiyacım var. Öyle gibi benim web sayfasında düzgün moment.min.js dosyayı başvurulan ettik:

Yayın tarihi

:

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

benim web sayfasının HTML kısmına gelince, ben aynı sayfada iki farklı tarih saat 's var

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

Son Güncelleme tarihi

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

Önemli! Göreceli tarih ayrıştırması, "dünün" ötesine geçmemelidir. Her şeyin ötesinde, <time> etiketleri, JavaScript içermeyen tam datetime'larını göstermelidir - yani, Moment.js, "dün" geçmiş tarihe dokunmamalı veya ayrılmamalıdır.

Şimdi, kütüphanenin işini yukarıda belirtilen şekilde yapmak için kütüphane referansından sonra bir işlevi çağırmam gerekiyor. Yani soru şu, işlev ne olmalı? (JQuery'yi kullanmak zaten benim web sayfamdaki kütüphaneye başvurduğum için iyidir.)

Answer 1

Lütfen sorunuzunuzu belirtin. Göreceli bir tarih ayrıştırmak istediğinizi varsayalım ve maksimum "dün" olmalıdır.

Hiç moment.js kullanmamıştım, ancak belgelere göre, oldukça basit. Güncel tarih olarak var now = moment(); kullanın. Sonra fark diff() yöntemi kullanmak kontrol etmek var time = moment($(e).attr('datetime'));

ile DOM her time Etiketleme-ayrıştırmak:

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

Kullanım var ago = now.from(time) nispi çıkışını almak ve ago değişken ile DOM zaman yerine. Yorumlarınız dayalı

Güncelleme:

, Tamam iyi denenmemiş, ama bu temel fikir:

kodu güncellendi. kodu için @ JohannesKlauß için

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

teşekkürler. Bu temelde onun cevabını nasıl yürüttüğümü ve web sitemdeki kodu nasıl referans gösterdiğimi anlatıyor.

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

moment.min.js Moment.js kütüphanesi olduğunu

ve moment.executor.js (Johannes izniyle) bu kodu vardır:

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 : Aslında moment.min dosyasını düzenleyebilirsiniz.js ve bahsi geçen kodu en sonunda içine ekleyin. Bu şekilde, bir ek HTTP isteği kaydedeceksiniz. : P

Answer 3

Ayrıca (bugünden bir hafta kadar) bugün yakın sizin için biçimlendirir moment().calendar() işlevi tarihleri ​​kullanabilirsiniz:

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

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

Bu kod ile biçim dizeleri özelleştirebilirsiniz: Dünden önce tarihleri ​​biçimlendirme ilgilenen değilseniz

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

, sadece (örneğin 'L') tam tarih-saat formatına lastWeek ve nextWeek ait biçimlerini değiştirmek.

---

GÜNCELLEME 2013/09/06 Anlaşılan o da bunu lokalize sağlayan yeni bir sözdizimi vardır: Yukarıdaki its_me uygulamasına @ genişletme

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

, burada bir sürüm olduğunu

• , tüm öğelerin verilen bir sınıf
• ile güncelleştirilmesini her dakika güncelleştirir (yani '1 dakika önce' b '2 dakika önce' geçiyor ')
• , şu andan itibaren + -1 gün olduğunda farklı bir biçime geçer (ör. Geçen Salı saat 11: 45'de)

Burada oynamak için bir JSFiddle var.

HTML'iniz:

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

JS içerecek şekilde:

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

})();