XỬ LÝ THỜI GIAN VỚI MOMENT JS

5 min readApr 15, 2020

Giới thiệu bài viết

Moment là 1 thư viện xử lý datetime cực kỳ mạnh mẽ do cộng đồng viết ra. Hầu hết các xử lý datetime giờ đây sẽ trở lên dễ dàng hơn bao giờ hết với super library này, có thể coi nó mạnh như thư viện lodash vậy (1 thư viện xử lý logic rất tuyệt vời). Trong phạm vi bài viết này mình sẽ chỉ liệt kê một số hàm thông dụng thông qua danh mục dưới đây.

Parse
Get-Set
Manipulate:
Moment duration
Tổng hợp một số lệnh qua ví dụ

Cài đặt và sử dụng MomentJS

Trước tiên cần cài đặt momentjs để test.

npm install moment

Hoặc đơn giản nhất là bạn mở trang momentjs theo địa chỉ sau http://momentjs.com/, mở development tool của trình duyệt bạn sử dụng và test thử ngay.

Parse

Now

moment(): lấy ra tiêu chuẩn, ngày, giờ, năm, tháng hiện tại.

var now = moment();

String & String + Format & String + Formats, Special + Formats

moment(string): truyền vào một string sẽ tự được format thành date theo tiêu chuẩn YYYY-MM-DD (IS0 8601).

var day = moment("1995-12-25");

moment(string, format): định dạng theo chuẩn quy định ví dụ: moment(“12–25–1995”, “MM-DD-YYYY”).

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

moment(string, formats): định dạng theo nhiều chuẩn, sử dụng khi bạn chưa biết nó là định dạng gì, đây gọi là kiểm tra nhiều định dạng phù hợp.

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

moment(special, format): định dạng chuẩn thời gian, ví dụ:

moment(“2010–01–01T05:06:07”, moment.ISO_8601);

Array

Tạo một moment với các tham số truyền vào, ví dụ:

// [year, month, day, hour, minute, second, millisecond]
moment([2010, 1, 14, 15, 25, 50, 125]);
// February 14th, 3:25:50.125 PM

Nếu chỉ có tùy chọn năm được lựa chọn thì => các tùy chọn còn lại sẽ lấy giá trị nhỏ nhất, ví dụ:

moment([2010]); // January 1st => ngày 1 tháng 1 (do không có ngày và tháng truyền vào => lấy ngày tháng nhỏ nhất trong năm)
moment([2010, 6]); // July 1st => ngày mùng 1 (lấy ngày nhỏ nhất trong tháng)
moment([2010, 6, 10]); // July 10th

Moment clone, momment validation

Clone: tạo lại một bản sao chép lại một moment và khi thay đổi giá trị không làm ảnh hưởng tới giá trị của bản gốc.
Validation: kiểm tra tính hợp lệ của chuỗi ngày tháng truyền vào. Ví dụ: moment([2015, 25, 35]).format(); // Invalid date

Get - Set

Millisecond, Second, Minute, Hour, Date Of Month (<=> date), Date Of Week (<=> day)

Moment().<type_time>(): Lấy ra thời gian hiện tại tương ứng với từng kiểu đề xuất <type_time> <=> mili giây, giây, phút và giờ.
Moment().<type_time>(Number): set giá trị thời gian cho đối tượng moment

Manipulate

Add: là lệnh để cộng thêm 1 thời gian cụ thể vào moment. Cú pháp moment().add(Number, Option <String>). Ví dụ:

moment().add(7, ‘days’) // là cộng thêm vào ngày hiện tại 7 ngày nữa

Ngoài ra còn có thêm các tùy chọn thay cho ‘days’ như:

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

Subtract: là lệnh cộng thêm 1 khoảng thời gian chỉ định cho moment. Cú pháp moment().subtract(Number, Option <String>), option và cách hoạt động tương tự như của add.

endOf: lấy thời gian cuối cùng theo day, week, month, year

startOf: tương tự như endOf nhưng là thời gian bắt đầu

moment().startOf('year');    // set to January 1st, 12:00 am this year
moment().startOf('month');   // set to the first of this month, 12:00 am
moment().startOf('quarter');  // set to the beginning of the current quarter, 1st day of months, 12:00 am
moment().startOf('week');    // set to the first day of this week, 12:00 am
moment().startOf('isoWeek'); // set to the first day of this week according to ISO 8601, 12:00 am
moment().startOf('day');     // set to 12:00 am today
moment().startOf('date');     // set to 12:00 am today
moment().startOf('hour');    // set to now, but with 0 mins, 0 secs, and 0 ms
moment().startOf('minute');  // set to now, but with 0 seconds and 0 milliseconds
moment().startOf('second');  // same as moment().milliseconds(0);

Moment và duration

Duration là 1 prototype của moment giúp ta tính toán ước lượng một khoảng thời gian nhất định.

// Muốn trừ 1 khoảng thời gian trong vòng bao lâu ta chỉ cần moment.duration(1, “minutes”).humanize();// Nếu muốn có thêm hậu tố ta sử dụng thêm
moment.duration(1, “minutes”).humanize(true);

Ví dụ:

moment.duration(69, "days").humanize();  // => result "2 months"
moment.duration(32, "days").humanize();  // => result "a month"

Tổng hợp một số hàm tiện ích qua ví dụ

Dưới đây mình có tổng hợp 1 số hàm ví dụ để các bạn có một số cái nhìn trực quan khi làm việc với moment

Moment().toString(): return => “Sat Dec 24 2016 14:33:43 GMT+0700”
Moment().toISOString(): return => “2016–12–24T07:34:06.388Z”
Moment()._d: return => Sat Dec 24 2016 14:33:43 GMT+0700 (SE Asia Standard Time) (có new Date())
moment() : trả ra đối tượng thời gian
moment().toDate(): trả ra chuỗi thời gian format theo GMT
moment().toDate().valueOf(): gửi về chuỗi timestamp (đại lại là chuỗi số 13 ký tự)
moment().month(): lấy ra tháng hiện tại
moment().year(): lấy ra năm hiện tại
moment().year(Number): set năm cho
moment().daysInMonth(): kiểm tra số ngày trong tháng
moment().isLeapYear(): kiểm tra năm nhuần
toLocaleString: get 1 chuỗi thời gian format nhận định dạng 0 ở đầu: ví dụ bạn có số 01 thông thường khi bạn làm việc in ra màn hình nó sẽ in ra là 1 => bạn muốn in ra 01 => sử dụng format với toLocaleString.

(01).toLocaleString(‘en-US’, {minimumIntegerDigits: 2, useGrouping:false})

**Chú ý: Nếu bạn muốn in ra nhiều dãy số 0 đằng trước bạn chỉ cần tăng số minimumIntegerDigits nên là xong! Chú ý moment().toDate() là tương đương với new Date().

ISO Dates: new Date(“YYYY-MM-DD”) : cú pháp cách nhau bởi dấu -
Long Dates: new Date(‘August 03 2013’): cú pháp cách nhau bởi dấu cách và định dạng viết đầy đủ
Short Dates: new Date(‘2012/06/24’): cú pháp cách nhau bởi dấu /
Full Date Format: new Date(“Sun Aug 12 2012 00:00:00 GMT+0700 (SE Asia Standard Time)”); tất cả các kết quả đều trả về 1 chuỗi có định dạng kiểu như sau:

Sun Aug 12 2012 00:00:00 GMT+0700 (SE Asia Standard Time)

Tổng Kết

Trên đây là một số cách làm việc cơ bản với moment. Bạn có thể xem thêm rất nhiều tiện ích khác từ thư viện này tại trang chủ của họ. Mình hi vọng bạn sẽ thích khi làm việc với thư viện tiện ích này.

Comment bên dưới những điều bạn chưa hiểu và cho mình biết thêm những ý kiến đóng góp từ các bạn nhé !