HomeLập trìnhJavaScriptHướng dẫn cơ...

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.

Đọc thêm  Cách xóa phần tử khỏi mảng JavaScript – Xóa một mục cụ thể trong JS

Để 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.

Đọc thêm  Cách xóa phần tử khỏi mảng JavaScript – Xóa một mục cụ thể trong JS

Đị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:

Đầu vào đầu ra Sự miêu tả
YYYY 2019 năm 4 chữ số
YY 19 năm có 2 chữ số
MMMM Tháng tám tên đầy đủ tháng
MMM tháng 8 Tên tháng viết tắt
MM 08 tháng 2 chữ số
m số 8 tháng 1 chữ số
DDD 225 Ngày trong năm
ĐĐ 13 Ngày trong tháng
Làm ngày 13 Ngày trong tháng với thứ tự
đdd Thứ tư Tên đầy đủ ngày
đđ Thứ Tư Tên ngày viết tắt
hộ 17 Giờ trong thời gian 24 giờ
hh 05 Giờ trong thời gian 12 giờ
mm 32 Phút
ss 19 giây
một sáng / chiều Trước hoặc sau kinh tuyến
Một SÁNG / CHIỀU Viết hoa ante hoặc post meridiem
ZZ +0900 Múi giờ bù từ UTC
X 1410715640.579 Dấu thời gian Unix tính bằng giây
XX 1410715640579 Dấu thời gian Unix tính bằng mili giây
Đọc thêm  Cách sử dụng map(), filter() và reduce() trong JavaScript

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.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status