Lời nói đầu: Trong bài này mình xin giới thiệu cho các bạn về một thư viện xử lý thời gian trong javaScript đó là Moment.js, không nói nhiều nữa bây giờ chúng ta vào bài thôi nào Moment.JS là gì ? Như mình đã nói ở trên Moment.JS là một thư viện xử lý datetime trong javaScript, Moment.js có thể xử lý datetime ở bất kỳ đâu fontend và cả backend Đầu tiên mình sẽ install module của moment bằng lệnh sau: npm install moment --save Parse Thường chúng ta hay dùng Date.prototype để thao tác với các datetime thì moment.js tạo một wrapper cho Date object. Để có được đối tượng wrapper này, chỉ cần gọi moment () Moment.prototype : Dùng để thêm các chức năng cho việc xử lý datetime Now Mình sử dụng moment() để lấy thời điểm hiện tại const moment = require("moment");//import package momentconst now = moment();console.log(now); String Mình sẽ đưa một string vào trong moment(), moment() sẽ tự động format theo chuẩn ISO 8601 const moment = require("moment");const birthday = moment("08-04-1997");console.log(birthday); String + Format Nếu chúng ta xác định được đầu vào của datetime thì mình sẽ tiến hành định dạng cho nó const moment = require("moment");const birth = moment("08/04/1997", "MM-DD-YYYY");console.log(birth); String + Formats Ngước lại so với String + Format thì mình sẽ, sẽ dùng một mảng để tiến hành định dạng cho nó Cú pháp: **moment(String, String[])**const moment = require("moment");const birth = moment("08/04/1997", ["DD-MM-YYYY", "YYYY-MM-DD"]);console.log(birth); Date Validation Mình sử dụng const moment = require("moment");//import package momentconst now = moment();console.log(now); 7 trong moment để kiểm tra date time đưa vào có đúng format là date time không nó sẽ trả về const moment = require("moment");//import package momentconst now = moment();console.log(now); 8 const moment = require("moment");const birth = moment("2019-07", "YYYY-MMM-DDD").isValid(); //true const birth1 = moment("2010 11 31", "YYYY-MM-DD").isValid(); //falseconsole.log(birth); console.log(birth1); Manipulate Moment cung cấp cho chúng một số function để ta cho thể làm việc với datetime Add Để thêm thời gian vào thời gian trong moment thì chúng ta sử dụng như sau: moment(string).add(Number, String);const moment = require("moment");const birth = moment("2017-07-10", "YYYY-MM-DD").add(7, "days");console.log(birth); Subtract Ngược lại với Add là thêm thời gian, thì Subtract sẽ giảm đi thời gian moment(string).subtract(Number, String);const moment = require("moment");const birth = moment("2017-07-10", "YYYY-MM-DD").subtract(1, "months");console.log(birth); Start of TimeXem lúc bắt đầu thời gian của object chứa trong moment() momnet(string).startOf(string)const moment = require("moment");const birth = moment("2019-07-10", "YYYY-MM-DD").startOf("year");console.log(birth); End of TimeNgược lại so với Start of time thì ta sẽ xem thời gian kết thúc của object chứa trong moment() momnet(string).end0f(string)const moment = require("moment");const birth = moment("2019-07-10", "YYYY-MM-DD").endOf("year");console.log(birth); Time from nowSo sánh thời gian (quá khứ, tương lai) với thời gian hiện tại const moment = require("moment");//import package momentconst now = moment();console.log(now); 0 Time from XSo sánh 2 mốc thời gian đã có sẵn const moment = require("moment");//import package momentconst now = moment();console.log(now); 1 Days in MonthTrả về số ngày của tháng const moment = require("moment");//import package momentconst now = moment();console.log(now); 2 Format Moment sẽ trả về một object chứa rất nhiều thông tin, nếu muốn truy cập được các thuộc tính này để thực hiện thao tác với datime thì ta sử dụng format() Đây là object của moment trả về Cú pháp của format() như sau: const moment = require("moment");//import package momentconst now = moment();console.log(now); 3 Điểm yếu của Moment.JS So với các thư viện Dateime khác thì moment có hiệu xuất không tốt bằng, ngoài ra moment.js khá nặng (66.4KB gzip) khi phải đính kèm tất cả định dạng ngôn ngữ. Để giải quyết vấn đề này, bạn có thể dùng const moment = require("moment");//import package momentconst now = moment();console.log(now); 9 để bỏ đi những định dạng không cần thiết. Đầu tiên mình install webpack const moment = require("moment");//import package momentconst now = moment();console.log(now); 4 Sau đó mình thực hiện install moment-locales-webpack-plugin const moment = require("moment");//import package momentconst now = moment();console.log(now); 5 Mình thực hiện config trong webpack const moment = require("moment");//import package momentconst now = moment();console.log(now); 6 Tổng kết: Bài viết này mình đã giới thiệu một số hàm cơ bản trong Moment, mong rằng bài viết này sẽ giúp ích cho các bạn |
