@manhng

Welcome to my blog!

Moment.js

July 16, 2019 09:26

Moment.js (edit)

1) Để có được ngày và giờ hiện tại, chỉ cần gọi moment () mà không có tham số:

moment();

2) Nếu bạn biết định dạng của một chuỗi đầu vào, bạn có thể sử dụng nó để phân tích một thời điểm:

moment("12-25-1995", "MM-DD-YYYY");

3) Format

moment().format("YYYY Do MM");

moment().format(‘DD/MM/YYYY HH:mm’);

4) Bạn có thể tạo Moment với đối tượng Javascript Date native sẵn có:

var day = new Date(2019, 07, 15);

var d = moment(day);

5) Moment.js sử dụng overload getters, setters:

moment().year();

moment().month();

moment().date();

moment().hour();

moment().minute();

moment().second();

moment().millisecond();

6) Get số ngày trong tháng hiện tại:

moment().daysInMonth();

moment("2012-02", "YYYY-MM").daysInMonth() // 29

moment("2012-01", "YYYY-MM").daysInMonth() // 31

7) Array: Bạn có thể tạo ra một moment với một mảng các con số phản chiếu các tham số được truyền đến new Date() [year, month, day, hour, minute, second, millisecond]

moment().toArray(); // [2013, 1, 4, 14, 40, 16, 154];

8) Bạn cũng có thể manipulating dates bằng các hàm add, subtract...

moment().add(7, 'days');

moment().subtract(7, 'days');

years           y
quarters       Q
months        M
weeks          w
days             d
hours           h
minutes        m
seconds        s
milliseconds  ms

9) Tham khảo thêm tại đây: 

https://viblo.asia/p/gioi-thieu-ve-momentjs-63vKjnwAK2R

https://ehkoo.com/bai-viet/nhung-thu-vien-xu-ly-ngay-thang-trong-javascript

10) Hạn chế

https://luubinhan.github.io/blog/2019-03-17-vi-sao-ban-ko-nen-xai-moment-js/

const startedAt = moment()
const endedAt   = startedAt.add(1, 'year')

console.log(startedAt) // > 2020-02-09T13:39:07+01:00
console.log(endedAt)   // > 2020-02-09T13:39:07+01:00

startedAt, endedAt đều là mutable (có thể thay đổi), rõ ràng chúng ta không muốn giá trị của startedAt bị thay đổi sau khi gọi hàm add

11) Cách giải quyết

const startedAt = moment()
const endedAt   = moment(startedAt).add(1, 'year')

Khi dùng Moment.js luôn nhớ dùng cách này để tạo một instance mới

12) Kiểm Thử


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script>
$(function(){
var dt = new Date(2019, 07, 15, 0, 0, 0, 0);
alert(moment(dt).format("YYYY-MM-DD"));
});
</script>
</head>
<body>
</body>
</html>

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