@manhnguyenv

Welcome to my blog!

Moment.js - Hiển thị thời gian thân thiện giống Facebook

July 14, 2017 00:14

Sử dụng moment.js để hiển thị thời gian như facebook trong MVC

Như các bạn đã sử dụng facebook thì thấy cách hiển thị thời gian của facebook khá là thân thiện như “cách đây vài phút”, “vừa mới xong”, “hai ngày trước”.. kiểu như cái ảnh cua mình này :)) bạn nào xin code lẫn ảnh đều được nhé :))

 

Mình thấy hay nên có tham khảo 1 số cách làm trên mạng nào là code ở server rồi trả về client, sử dụng thư viện thêm bla bla thì thấy có thư viện moment js dung là ổn nhất vì được support khá là mạnh cũng như tài liệu khá là chi tiết
Khi sử dụng thư viện này, bạn có thể hiển thị thời gian theo múi giờ của từng client khi truy cập trang web cũng được :3 khá là bá phải không J

Để làm được mấy cái trên thì bạn vào Nuget tìm moment.js và cái vào nhé :3 hoặc thông qua lệnh

Install-Package Moment.js

Còn trên giao diện thì bạn cần sửa như sau

<span class=”local-datetime”

title=”@(Model.CreatedTime.ToString(“yyyy-MM-dd HH:mm”)) UTC”

data-utc=”@(Model.CreatedTime.GetTicks())”>

@(Model.CreatedTime.ToString(“yyyy-MM-dd HH:mm”)) UTC

</span>

Đặc biệt lưu ý đối với các bạn là thời gian ở đây hiển thị ra phải chạy qua hàm ToUniversalTime đối với thuộc tính CreatedTime nhé :v không thì có thể code luôn như sau

<span class=”local-datetime”

title=”@(Model.CreatedTime.ToUniversalTime().ToString(“yyyy-MM-dd HH:mm”)) UTC”

data-utc=”@(Model.CreatedTime.ToUniversalTime().GetTicks())”>

@(Model.CreatedTime.ToUniversalTime().ToString(“yyyy-MM-dd HH:mm”)) UTC

</span>

Khi sử dụng hàm này mục đích là để sử dụng múi giờ mà code đang chạy ở server.

Ví dụ như nếu DateTime của bạn là 01/01/1970, thì nghĩa là nó chả quan tâm bạn đang ở đâu trên thế giới cả còn nếu bạn chạy ToUniversalTime khi chạy code ở Greenwich và chạy ở Hà Nội thì bạn sẽ nhận được DateTime được cộng thêm 7h

Còn giờ thì cài đặt thêm extensionmethod GetTicks. Cái này chủ yếu để đổi format của Datetime cho cái thằng Moment.js có thể xử lý dễ dàng, đỡ lằng nhằng đổi qua đổi lại ở phía client ấy mà

private static readonly DateTime Epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);

public static double GetTicks (this DateTime dateTime)

{

return dateTime.Subtract(Epoch).TotalMilliseconds;

}

Bước cuối cùng là bảo thằng Moment.js làm việc thôi chứ còn gì nữa (y)

$(‘.local-datetime’).each(function () {

var $this = $(this), utcDate = parseInt($this.attr(‘data-utc’), 10) || 0;

if (!utcDate) {

return;

}

var local = moment.utc(utcDate).local();

var formattedDate = “”;

var days = moment().diff(local, ‘days’);

if (days > 2) {

formattedDate = local.locale(‘en’).format(‘DD/MM/YYYY HH:mm’);

}

else {

formattedDate = local.locale(‘vi’).fromNow();

}
$this.text(formattedDate);

});

Đoạn code này có sử dụng cả cái thư viện localize của moment.js các bạn lưu ý thêm vào nhé để hiển thị ra tiếng Việt ấy mà :3

Mình có cho là ngày hiện tại lớn hơn cái ngày mình hiển thị ra 2 ngày thì vẫn format như bình thường còn không thì hiển thị kiểu “mấy giây trước”, “ vừa xong”…

Phần này mình thấy khá đơn giản nên không các bạn tự copy vào nhé mình đỡ đẩy lên github 😀

Categories

Recent posts