Cách sử dụng Moment.js?

Question

Tôi không thể theo dõi Moment.js documentation và cần trợ giúp để thiết lập. Tôi đã tham khảo các tập tin moment.min.js đúng trên trang web của tôi như vậy:

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

Đến với phần HTML của trang web của tôi, tôi có hai nhân khác nhau datetime trên cùng một trang:

đăng ngày

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

Sửa đổi lần cuối ngày

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

Quan trọng! Phân tích ngày tương đối không được vượt quá "ngày hôm qua". Đối với mọi thứ ngoài, các thẻ <time> sẽ hiển thị chính xác thời gian của ngày mà chúng sẽ không có JavaScript - tức là Moment.js không được chạm hoặc phân tích các ngày quá khứ "ngày hôm qua".

Bây giờ, để làm cho thư viện thực hiện công việc của mình như đã nói ở trên, tôi cần gọi hàm sau khi tham chiếu thư viện. Vì vậy, câu hỏi là, chức năng nên là gì? (Sử dụng jQuery là tốt, vì tôi đã tham khảo thư viện trên trang web của mình.)

Answer 1

Vui lòng chỉ định câu hỏi của bạn. Tôi giả sử bạn muốn phân tích cú pháp ngày tương đối và tối đa phải là "ngày hôm qua".

Tôi chưa bao giờ sử dụng moment.js nhưng theo như các tài liệu nói, nó khá đơn giản.

Sử dụng var now = moment(); làm ngày hiện tại của bạn. Sau đó phân tích mỗi time -Tag trong DOM của bạn với var time = moment($(e).attr('datetime'));

Để kiểm tra sự khác biệt sử dụng phương pháp diff():

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

Sử dụng var ago = now.from(time) để có được kết quả tương đối và thay thế thời gian trong DOM của bạn với biến ago của bạn.

Cập nhật dựa trên nhận xét:

Được rồi, cũng chưa được kiểm tra, nhưng đó là ý tưởng cơ bản:

Cập nhật mã.

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

Nhờ @ JohannesKlauß cho mã. Đây là cơ bản như thế nào tôi thực hiện câu trả lời của mình và làm thế nào tôi tham khảo mã trên trang web của tôi.

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

đâu, moment.min.js là thư viện Moment.js, và moment.executor.js có mã này (lịch sự của 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 : Bạn thực sự có thể chỉnh sửa moment.min.js và thêm mã nói trên ngay trong nó, ở cuối. Bằng cách này, bạn sẽ lưu một yêu cầu HTTP bổ sung. : P

Answer 3

Bạn cũng có thể sử dụng moment().calendar() chức năng, mà sẽ định dạng cho bạn vị gần đến ngày hôm nay (lên đến một tuần kể từ hôm nay):

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

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

Bạn có thể tùy chỉnh các chuỗi định dạng với mã này:

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

Nếu bạn không quan tâm đến định dạng ngày trước khi ngày hôm qua, chỉ cần thay đổi định dạng của lastWeek và nextWeek sang định dạng đầy đủ ngày-thời gian (ví dụ 'L').

---

CẬP NHẬT 2013/09/06 Rõ ràng nó có một cú pháp mới cũng cho phép bạn để bản địa hoá nó:

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

Mở rộng @ thực hiện its_me của trên, đây là một phiên bản đó

• cập nhật tất cả các yếu tố với một lớp học nhất định
• giữ cho chúng được cập nhật từng phút (vì vậy '1 phút trước' b ecomes '2 phút trước')
• chuyển sang một định dạng khác khi + -1 ngày kể từ bây giờ (ví dụ: Thứ Ba tuần trước lúc 11:45 chiều)

Đây là số JSFiddle để bạn chơi cùng.

HTML của bạn:

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

Các JS bao gồm:

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

})();