Hướng dẫn sử dụng Moment.js cơ bản
Moment.js là một thư viện tuyệt vời để làm việc với đối tượng date trên một trường browser và môi trường Nodejs.
Bài viết này nhằm giải thích những điều cơ bản và cách sử dụng phổ biến nhất của thư viện này.
Cài đặt
Bạn có thể nhúng nó trực tiếp vào trang của bạn bằng thẻ script
giống như một file .js mở rộng thông thường, bạn có thể tải file thư viện về môi trường của bạn hoặc sử dụng trực tiếp đường link được cung cấp tại cdnjs.com hoặc jsDelivr.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
hoặc bạn có thể tải thư viện thông qua npm (hoặc yarn)
npm install moment
Nếu bạn cài đặt bằng npm, bạn cần import thư viện moment.js ở trong code của bạn (ví dụ với ES Modules):
import moment from 'moment'
hoặc cú pháp require
(sử dụng CommonJS):
const moment = require('moment')
Lấy ngày và giờ hiện tại
const date = moment()
date
là một đối tượng moment,
Convert một string thành đối tượng moment date
Một đối tượng moment có thể được khởi tạo với một string đại diện cho một giá trị date:
const date = moment(string)
nó chấp nhận bất kỳ format nào, các format được dùng để chuyển từ string thành date (theo thứ tự ưu tiên từ trên xuống dưới):
- ISO 8601
- The RFC 2822 Date Time format
- Các format được chấp nhận bởi đối tượng Date native
Format | Meaning | Example |
---|---|---|
YYYY | 4-digits Year | 2018 |
YY | 2-digits Year | 18 |
M | 2-digits Month number, omits leading 0 | 7 |
MM | 2-digits Month number | 07 |
MMM | 3-letters Month name | Jul |
MMMM | Full Month name | July |
dddd | Full day name | Sunday |
gggg | 4-digits Week year | 2018 |
gg | 2-digits Week year | 18 |
w | Week of the year without leading zero | 18 |
ww | Week of the year with leading zero | 18 |
e | Day of the week, starts at 0 | 4 |
D | 2-digits day number, omits leading 0 | 9 |
DD | 2-digits day number | 09 |
Do | Day number with ordinal | 9th |
T | Indicates the start of the time part | |
HH | 2-digits hours (24 hour time) from 0 to 23 | 22 |
H | 2-digits hours (24 hour time) from 0 to 23 without leading 0 | 22 |
kk | 2-digits hours (24 hour time) from 1 to 24 | 23 |
k | 2-digits hours (24 hour time) from 1 to 24 without leading 0 | 23 |
a/A | am or pm | pm |
hh | 2-digits hours (12 hour time) | 11 |
mm | 2-digits minutes | 22 |
ss | 2-digits seconds | 40 |
s | 2-digits seconds without leading zero | 40 |
S | 1-digits milliseconds | 1 |
SS | 2-digits milliseconds | 12 |
SSS | 3-digits milliseconds | 123 |
Z | The timezone | +02:00 |
x | UNIX timestamp in milliseconds | 1410432140575 |
Chuyển đối tượng moment date sang string
Khi bạn muốn in ra một giá trị ngày tháng bằng đối tượng Date native của Javascript, bạn có rất ít tùy chọn để định dạng thông tin ngày tháng từ đối tượng Date. Bạn có thể tự xây dựng cách format đối tượng Date theo cách của bạn bằng cách sử dụng các phương thức có sẵn.
Moment cung cấp một cách thuận tiện để định dạng ngày theo nhu cầu của bạn, sử dụng phương thức .format()
:
date.format(string)
Format được chấp nhận giống như format được mô tả ở phần “Convert một string thành đối tượng moment date” ở trên.
Ví dụ:
moment().format("YYYY Do MM") // "2019 3rd 06"
Moment còn cung cấp một số hằng số định dạng chuẩn, bạn có thể sử dụng chúng thay vì viết định dạng của riêng bạn:
Constant | Format | Example |
---|---|---|
moment.HTML5_FMT.DATETIME_LOCAL | YYYY-MM-DDTHH:mm | 2017-12-14T16:34 |
moment.HTML5_FMT.DATETIME_LOCAL_SECONDS | YYYY-MM-DDTHH:mm:ss | 2017-12-14T16:34:10 |
moment.HTML5_FMT.DATETIME_LOCAL_MS | YYYY-MM-DDTHH:mm:ss.SSS | 2017-12-14T16:34:10.234 |
moment.HTML5_FMT.DATE | YYYY-MM-DD | 2017-12-14 |
moment.HTML5_FMT.TIME | HH:mm | 16:34 |
moment.HTML5_FMT.TIME_SECONDS | HH:mm:ss | 16:34:10 |
moment.HTML5_FMT.TIME_MS | HH:mm:ss.SSS | 16:34:10.234 |
moment.HTML5_FMT.WEEK | YYYY-[W]WW | 2017-W50 |
moment.HTML5_FMT.MONTH | YYYY-MM | 2017-12 |
Kiểm tra định dạng ngày tháng
.isValid ()
:moment('2019-13-23').isValid() //false moment('2019-11-23').isValid() //true
Khoảng thời gian từ quá khứ, tương lai (cho tới ngày)
Phương thức .fromNow() được sử dụng để lấy ra một string cho biết thời gian được cung cấp so với thời điểm hiện tại.
// today: 2019-06-03 moment('2016-11-23').fromNow() // "3 years ago" moment('2019-05-23').fromNow() // "11 days ago" moment('2019-11-23').fromNow() // "in 6 months"
moment('2016-11-23').fromNow() // "3 years" moment('2019-05-23').fromNow() // "11 days" moment('2019-11-23').fromNow() // "6 months"
Thao tác tính toán với một đối tượng Moment date
Bạn có thể thêm hoặc bớt bất kỳ khoảng thời gian nào cho một ngày:
moment('2018-11-23').add(1, 'years') moment('2018-11-23').subtract(1, 'years')
Bạn có thể sử dụng các giá trị: years, quarters, months, weeks, days, hours, minutes, seconds, milliseconds