Hướng dẫn cơ bản về JavaScript Date và Moment.js

Chào mừng bạn đến với hướng dẫn cuối cùng của chúng tôi về JavaScript Date đối tượng và Moment.js. Hướng dẫn này sẽ dạy cho bạn mọi thứ bạn cần biết về cách làm việc với ngày và giờ trong các dự án của bạn.

Làm thế nào để tạo một Date Vật

Lấy ngày và giờ hiện tại

const now = new Date();

// Mon Aug 10 2019 12:58:21 GMT-0400 (Eastern Daylight Time)

Nhận ngày và giờ với các giá trị riêng lẻ

const specifiedDate = new Date(2019, 4, 29, 15, 0, 0, 0);

// Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

Cú pháp là Date(year, month, day, hour, minute, second, millisecond).

Lưu ý rằng các tháng không được lập chỉ mục, bắt đầu từ tháng 1 ở 0 và kết thúc vào tháng 12 ở 11.

Nhận ngày và giờ từ dấu thời gian

const unixEpoch = new Date(0);

Điều này thể hiện thời gian vào Thứ Năm, ngày 1 tháng 1 năm 1970 (UTC) hoặc thời gian Unix Epoch. Kỷ nguyên Unix rất quan trọng vì nó là thứ mà JavaScript, Python, PHP cũng như các ngôn ngữ và hệ thống khác sử dụng nội bộ để tính toán thời gian hiện tại.

new Date(ms) trả về ngày của kỷ nguyên cộng với số mili giây bạn chuyển vào. Trong một ngày có 86.400.000 mili giây, vì vậy:

const dayAfterEpoch = new Date(86400000);

sẽ trở lại Thứ Sáu, ngày 2 tháng 1 năm 1970 (UTC).

Nhận ngày và giờ từ một chuỗi

const stringDate = new Date('May 29, 2019 15:00:00');

// Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

Lấy ngày theo cách này rất linh hoạt. Tất cả các ví dụ dưới đây trở lại hợp lệ Date các đối tượng:

new Date('2019-06') // June 1st, 2019 00:00:00
new Date('2019-06-16') // June 16th, 2019
new Date('2019') // January 1st, 2019 00:00:00
new Date('JUNE 16, 2019')
new Date('6/23/2019')

Bạn cũng có thể sử dụng Date.parse() phương thức trả về số mili giây kể từ kỷ nguyên (ngày 1 tháng 1 năm 1970):

Date.parse('1970-01-02') // 86400000
Date.parse('6/16/2019') // 1560610800000

Đặt múi giờ

Khi chuyển một chuỗi ngày mà không đặt múi giờ, JavaScript sẽ giả sử ngày/giờ ở dạng UTC trước khi chuyển đổi nó thành múi giờ của trình duyệt của bạn:

const exactBirthdate = new Date('6/13/2018 06:27:00');

console.log(exactBirthdate) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

Điều này có thể dẫn đến lỗi trong đó ngày trả về bị lệch nhiều giờ. Để tránh điều này, hãy chuyển múi giờ cùng với chuỗi:

const exactBirthdate = new Date('6/13/2018 06:27:00 GMT-1000');

console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time)

/*
These formats also work:

new Date('6/13/2018 06:27:00 GMT-10:00');
new Date('6/13/2018 06:27:00 -1000');
new Date('6/13/2018 06:27:00 -10:00');
*/

Bạn cũng có thể chuyển một số, nhưng không phải tất cả, mã múi giờ:

const exactBirthdate = new Date('6/13/2018 06:27:00 PDT');

console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time)

Date phương pháp đối tượng

Thường thì bạn sẽ không cần toàn bộ ngày mà chỉ cần một phần của nó như ngày, tuần hoặc tháng. May mắn thay, có một số phương pháp để làm điều đó:

const birthday = new Date('6/13/2018 06:27:39');

birthday.getMonth() // 5 (0 is January)
birthday.getDate() // 13
birthday.getDay() // 3 (0 is Sunday)
birthday.getFullYear() // 2018
birthday.getTime() // 1528838859000 (milliseconds since the Unix Epoch)
birthday.getHours() // 6
birthday.getMinutes() // 27
birthday.getSeconds() // 39
birthday.getTimezoneOffset() // -540 (time zone offset in minutes based on your browser's location)

Làm việc với ngày tháng dễ dàng hơn với Moment.js

Bắt đúng ngày và giờ không phải là nhiệm vụ nhỏ. Mỗi quốc gia dường như có một cách định dạng ngày khác nhau và việc tính toán các múi giờ khác nhau và thời gian tiết kiệm ánh sáng ban ngày/thời gian mùa hè sẽ mất rất nhiều thời gian. Đó là nơi Moment.js tỏa sáng – nó làm cho việc phân tích cú pháp, định dạng và hiển thị ngày tháng trở nên dễ dàng.

Để bắt đầu sử dụng Moment.js, hãy cài đặt nó thông qua trình quản lý gói như npmhoặc thêm nó vào trang web của bạn thông qua CDN. Xem tài liệu Moment.js để biết thêm chi tiết.

Nhận ngày giờ hiện tại với Moment.js

const now = moment();

Điều này trả về một đối tượng có ngày và giờ dựa trên vị trí trình duyệt của bạn, cùng với thông tin ngôn ngữ khác. Nó tương tự như JavaScript gốc new Date().

Nhận ngày và giờ từ dấu thời gian với Moment.js

tương tự như new Date(ms)bạn có thể chuyển số mili giây kể từ kỷ nguyên tới moment():

const dayAfterEpoch = moment(86400000);

Nếu bạn muốn lấy một ngày bằng cách sử dụng dấu thời gian Unix trong vài giây, bạn có thể sử dụng unix() phương pháp:

const dayAfterEpoch = moment.unix(86400);

Nhận ngày và giờ từ một chuỗi với Moment.js

Phân tích cú pháp ngày từ một chuỗi bằng Moment.js rất dễ dàng và thư viện chấp nhận các chuỗi ở định dạng Ngày giờ ISO 8601 hoặc RFC 2822, cùng với bất kỳ chuỗi nào được JavaScript chấp nhận Date vật.

Các chuỗi ISO 8601 được khuyến nghị vì đây là định dạng được chấp nhận rộng rãi. Dưới đây là một số ví dụ:

moment('2019-04-21');
moment('2019-04-21T05:30');
moment('2019-04-21 05:30');

moment('20190421');
moment('20190421T0530');

Đặt múi giờ với Moment.js

Cho đến bây giờ, chúng tôi đã sử dụng Moment.js trong chế độ cục bộ, nghĩa là bất kỳ đầu vào nào được coi là ngày hoặc giờ địa phương. Điều này tương tự như cách JavaScript gốc Date đối tượng hoạt động:

const exactBirthMoment = moment('2018-06-13 06:27:00');

console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

Tuy nhiên, để đặt múi giờ, trước tiên bạn phải lấy đối tượng Khoảnh khắc trong Chế độ UTC:

const exactBirthMoment = moment.utc('2018-06-13 06:27:00');

console.log(exactBirthMoment) // Wed Jun 13 2018 15:27:00 GMT+0900 (Korean Standard Time)

Sau đó, bạn có thể điều chỉnh sự khác biệt về múi giờ với utcOffset() phương pháp:

const exactBirthMoment = moment.utc('2018-06-13 06:27:00').utcOffset('+10:00');

console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

Bạn cũng có thể đặt độ lệch UTC dưới dạng số hoặc chuỗi:

moment.utc().utcOffset(10) // Number of hours offset
moment.utc().utcOffset(600) // Number of minutes offset
moment.utc().utcOffset('+10:00') // Number of hours offset as a string

Để sử dụng múi giờ được đặt tên (America/Los_Angeles) hoặc mã múi giờ (PDT) với các đối tượng Khoảnh khắc, hãy xem thư viện Múi giờ Khoảnh khắc.

Định dạng ngày giờ với Moment.js

Một trong những thế mạnh chính mà Moment.js vượt trội so với JavaScript gốc Date đối tượng là việc định dạng ngày và giờ đầu ra dễ dàng như thế nào. Chỉ cần xâu chuỗi format() phương thức cho một đối tượng ngày Khoảnh khắc và truyền cho nó một chuỗi định dạng làm tham số:

moment().format('MM-DD-YY'); // "08-13-19"
moment().format('MM-DD-YYYY'); // "08-13-2019"
moment().format('MM/DD/YYYY'); // "08/13/2019"
moment().format('MMM Do, YYYY') // "Aug 13th, 2019"
moment().format('ddd MMMM Do, YYYY HH:mm:ss') // "Tues August 13th, 2019 19:29:20"
moment().format('dddd, MMMM Do, YYYY -- hh:mm:ss A') // "Tuesday, August 13th, 2019 -- 07:31:02 PM"

Đây là bảng có một số mã thông báo định dạng phổ biến:

Xem tài liệu Moment.js để biết thêm mã thông báo định dạng.

Làm việc với JavaScript Date các đối tượng và Moment.js không cần tốn nhiều thời gian. Bây giờ bạn nên biết nhiều hơn đủ để bắt đầu với cả hai.