Nội dung
- Đối tượng ngày - Lấy ngày với get - Sửa đổi ngày với set - Phương pháp ngày với UTC - Kết luận

Thứ năm, 19/10/2017 | 00:00 GMT+7

Hiểu Ngày và Giờ trong JavaScript

Ngày và giờ là một phần thường xuyên trong cuộc sống hàng ngày của ta và do đó có tính năng nổi bật trong lập trình máy tính. Trong JavaScript, bạn có thể phải tạo một trang web có lịch, lịch tàu hoặc giao diện để cài đặt các cuộc hẹn. Các ứng dụng này cần hiển thị thời gian có liên quan dựa trên múi giờ hiện tại của user hoặc thực hiện các phép tính về điểm đến và đi hoặc thời gian bắt đầu và kết thúc. Ngoài ra, bạn có thể cần sử dụng JavaScript để tạo báo cáo vào một thời điểm nhất định hàng ngày hoặc lọc qua các nhà hàng và cơ sở hiện đang mở.

Để đạt được tất cả các mục tiêu này và hơn thế nữa, JavaScript đi kèm với đối tượng Date hợp sẵn và các phương thức liên quan. Hướng dẫn này sẽ trình bày về cách định dạng và sử dụng ngày giờ trong JavaScript.

Đối tượng ngày

Đối tượng Date là một đối tượng dựng sẵn trong JavaScript để lưu trữ ngày và giờ. Nó cung cấp một số phương pháp tích hợp để định dạng và quản lý dữ liệu đó.

Theo mặc định, một version Date mới không có đối số được cung cấp sẽ tạo ra một đối tượng tương ứng với ngày và giờ hiện tại. Điều này sẽ được tạo theo cài đặt hệ thống của máy tính hiện tại.

Để chứng minh Date của JavaScript, hãy tạo một biến và gán ngày hiện tại cho nó. Bài viết này được viết vào Thứ Tư, ngày 18 tháng 10 tại Luân Đôn (GMT), vì vậy đó là ngày, giờ và múi giờ hiện tại được trình bày bên dưới.

now.js

 // Set variable to current date and time const now = new Date();  // View the output now;

Output
Wed Oct 18 2017 12:41:34 GMT+0000 (UTC)

Nhìn vào kết quả , ta có một chuỗi ngày chứa như sau:

Ngày trong tuần	tháng	ngày	Năm	Giờ	Phút	Thứ hai	Múi giờ
Thứ Tư	Tháng 10	18	2017	12	41	34	GMT + 0000 (UTC)

Ngày và giờ được chia nhỏ và in theo cách mà ta có thể hiểu như con người.

Tuy nhiên, JavaScript hiểu ngày dựa trên dấu thời gian lấy từ thời gian Unix , là giá trị bao gồm số mili giây đã trôi qua kể từ nửa đêm ngày 1 tháng 1 năm 1970. Ta có thể lấy dấu thời gian bằng phương thức getTime() .

// Get the current timestamp now.getTime();

Output
1508330494000

Số lớn xuất hiện trong kết quả của ta cho dấu thời gian hiện tại đại diện cho cùng một giá trị như trên, ngày 18 tháng 10 năm 2017.

01 January, 1970 00:00:00 Universal Time (UTC) kỷ nguyên , còn gọi là giờ 0, được biểu thị bằng chuỗi ngày 01 January, 1970 00:00:00 Universal Time (UTC) và bằng dấu thời gian 0 . Ta có thể kiểm tra trong trình duyệt bằng cách tạo một biến mới và gán cho nó một version Date mới dựa trên dấu thời gian là 0 .

epoch.js

 // Assign the timestamp 0 to a new variable const epochTime = new Date(0);  epochTime;

Output
01 January, 1970 00:00:00 Universal Time (UTC)

Thời gian kỷ nguyên được chọn làm tiêu chuẩn để máy tính đo thời gian trong những ngày lập trình trước đó và nó là phương pháp mà JavaScript sử dụng. Điều quan trọng là phải hiểu khái niệm về cả dấu thời gian và chuỗi ngày, vì cả hai đều được dùng tùy thuộc vào cài đặt và mục đích của ứng dụng.

Lúc này, ta đã học cách tạo version Date mới dựa trên thời gian hiện tại và cách tạo một version dựa trên dấu thời gian. Tổng cộng, có bốn định dạng mà bạn có thể tạo Date mới trong JavaScript. Ngoài mặc định thời gian hiện tại và dấu thời gian, bạn cũng có thể sử dụng chuỗi ngày hoặc chỉ định ngày và giờ cụ thể.

Ngày tạo	Đầu ra
`new Date()`	Ngày và giờ hiện tại
`new Date(timestamp)`	Tạo ngày dựa trên mili giây kể từ giờ Kỷ nguyên
`new Date(date string)`	Tạo ngày dựa trên chuỗi ngày
`new Date(year, month, day, hours, minutes, seconds, milliseconds)`	Tạo ngày dựa trên ngày và giờ được chỉ định

Để chứng minh các cách khác nhau để tham chiếu đến một ngày cụ thể, ta sẽ tạo các đối tượng Date mới sẽ đại diện cho ngày 4 tháng 7 năm 1776 lúc 12:30 chiều GMT theo ba cách khác nhau.

usa.js

 // Timestamp method new Date(-6106015800000);  // Date string method new Date("January 31 1980 12:30");  // Date and time method new Date(1776, 6, 4, 12, 30, 0, 0);

Ba ví dụ trên đều tạo ra một ngày chứa thông tin giống nhau.

Bạn sẽ nhận thấy phương thức dấu thời gian có một số âm; bất kỳ ngày nào trước thời gian Epoch sẽ được biểu thị dưới dạng số âm.

Trong phương pháp ngày và giờ, giây và mili giây của ta được đặt thành 0 . Nếu thiếu bất kỳ số nào trong phần tạo Date , nó sẽ mặc định là 0 . Tuy nhiên, thứ tự không thể thay đổi, vì vậy hãy ghi nhớ điều đó nếu bạn quyết định bỏ một số. Bạn cũng có thể nhận thấy rằng tháng 7 được biểu thị bằng 6 , không phải 7 thông thường. Điều này là do số ngày và giờ bắt đầu từ 0 , như hầu hết các phép đếm trong lập trình đều làm. Xem phần tiếp theo để có biểu đồ chi tiết hơn.

Lấy ngày với `get`

Sau khi có ngày, ta có thể truy cập tất cả các thành phần của ngày bằng nhiều phương thức tích hợp sẵn. Các phương thức sẽ trả về từng phần của ngày liên quan đến múi giờ local . Mỗi phương thức này bắt đầu bằng get và sẽ trả về số tương đối. Dưới đây là bảng chi tiết về các phương thức get của đối tượng Date .

Ngày giờ	phương pháp	Phạm vi	Thí dụ
Năm	`getFullYear()`	YYYY	1970
tháng	`getMonth()`	0-11	0 = tháng 1
Ngày trong tháng)	`getDate()`	1-31	1 = ngày 1 của tháng
Ngày trong tuần)	`getDay()`	0-6	0 = Chủ nhật
Giờ	`getHours()`	0-23	0 = nửa đêm
Phút	`getMinutes()`	0-59
Thứ hai	`getSeconds()`	0-59
Mili giây	`getMilliseconds()`	0-999
Dấu thời gian	`getTime()`	Mili giây kể từ giờ Kỷ nguyên

Hãy tạo một ngày mới dựa trên ngày 31 tháng 7 năm 1980 và gán ngày đó cho một biến.

harryPotter.js

 // Initialize a new birthday instance const birthday = new Date(1980, 6, 31);

Bây giờ ta có thể sử dụng tất cả các phương pháp của bạn để lấy từng thành phần ngày tháng, từ năm đến mili giây.

getDateComponents.js

 birthday.getFullYear();      // 1980 birthday.getMonth();         // 6 birthday.getDate();          // 31 birthday.getDay();           // 4 birthday.getHours();         // 0 birthday.getMinutes();       // 0 birthday.getSeconds();       // 0 birthday.getMilliseconds();  // 0 birthday.getTime();          // 333849600000 (for GMT)

Đôi khi có thể cần chỉ extract một phần của ngày tháng và các phương thức get là công cụ bạn sẽ sử dụng để đạt được điều này.

Ví dụ về điều này, ta có thể kiểm tra ngày hiện tại so với ngày và tháng của ngày 3 tháng 10 để xem có phải là ngày 3 tháng 10 hay không.

oct3.js

 // Get today's date const today = new Date();  // Compare today with October 3rd if (today.getDate() === 3 && today.getMonth() === 9) {   console.log("It's October 3rd."); } else {   console.log("It's not October 3rd."); }

Output
It's not October 3rd.

Vì, tại thời điểm viết bài, không phải ngày 3 tháng 10, console phản ánh điều đó.

Các phương thức Date hợp bắt đầu bằng get cho phép ta truy cập vào các thành phần ngày trả về số được liên kết với những gì ta đang truy xuất từ đối tượng khởi tạo.

Sửa đổi ngày với `set`

Đối với tất cả các phương thức get mà ta đã học ở trên, có một phương thức set tương ứng. Where get được sử dụng để truy xuất một thành phần cụ thể từ một ngày, set được sử dụng để sửa đổi các thành phần của ngày. Dưới đây là biểu đồ chi tiết về các phương thức set của đối tượng Date .

Ngày giờ	phương pháp	Phạm vi	Thí dụ
Năm	`setFullYear()`	YYYY	1970
tháng	`setMonth()`	0-11	0 = tháng 1
Ngày trong tháng)	`setDate()`	1-31	1 = ngày 1 của tháng
Ngày trong tuần)	`setDay()`	0-6	0 = Chủ nhật
Giờ	`setHours()`	0-23	0 = nửa đêm
Phút	`setMinutes()`	0-59
Thứ hai	`setSeconds()`	0-59
Mili giây	`setMilliseconds()`	0-999
Dấu thời gian	`setTime()`	Mili giây kể từ giờ Kỷ nguyên

Ta có thể sử dụng các phương pháp set này để sửa đổi một, nhiều hoặc tất cả các thành phần của một ngày. Ví dụ: ta có thể thay đổi năm của biến birthday của birthday từ trên thành 1997 thay vì 1980 .

harryPotter.js

 // Change year of birthday date birthday.setFullYear(1997);  birthday;

Output
Thu Jul 31 1997 00:00:00 GMT+0000 (UTC)

Ta thấy trong ví dụ trên rằng khi ta gọi biến birthday ta nhận được năm mới như một phần của kết quả .

Các phương thức tích hợp bắt đầu bằng set cho phép ta sửa đổi các phần khác nhau của đối tượng Date .

Phương pháp ngày với UTC

Các phương thức get thảo luận ở trên truy xuất các thành phần ngày dựa trên cài đặt múi giờ local của user . Để tăng cường kiểm soát ngày và giờ, bạn có thể sử dụng các phương thức getUTC , giống hệt như các phương thức get , ngoại trừ chúng tính toán thời gian dựa trên tiêu chuẩn UTC (Giờ phối hợp quốc tế) . Dưới đây là bảng các phương thức UTC cho đối tượng JavaScript Date .

Ngày giờ	phương pháp	Phạm vi	Thí dụ
Năm	`getUTCFullYear()`	YYYY	1970
tháng	`getUTCMonth()`	0-11	0 = tháng 1
Ngày trong tháng)	`getUTCDate()`	1-31	1 = ngày 1 của tháng
Ngày trong tuần)	`getUTCDay()`	0-6	0 = Chủ nhật
Giờ	`getUTCHours()`	0-23	0 = nửa đêm
Phút	`getUTCMinutes()`	0-59
Thứ hai	`getUTCSeconds()`	0-59
Mili giây	`getUTCMilliseconds()`	0-999

Để kiểm tra sự khác biệt giữa phương thức get local và UTC, ta có thể chạy đoạn mã sau.

UTC.js

 // Assign current time to a variable const now = new Date();  // Print local and UTC timezones console.log(now.getHours()); console.log(now.getUTCHours());

Chạy mã này sẽ in ra giờ hiện tại và giờ của múi giờ UTC. Nếu bạn hiện đang ở múi giờ UTC, các con số xuất ra từ việc chạy chương trình ở trên sẽ giống nhau.

UTC hữu ích ở chỗ nó cung cấp tham chiếu tiêu chuẩn thời gian quốc tế và do đó có thể giữ cho mã của bạn nhất quán giữa các múi giờ nếu điều đó có thể áp dụng cho những gì bạn đang phát triển.

Kết luận

Trong hướng dẫn này, ta đã học cách tạo một version của đối tượng Date và sử dụng các phương thức tích hợp của nó để truy cập và sửa đổi các thành phần của một ngày cụ thể. Để có cái nhìn chuyên sâu hơn về ngày và giờ trong JavaScript, bạn có thể đọc tài liệu tham khảo Ngày trên Mạng nhà phát triển Mozilla .

Biết cách làm việc với ngày tháng là điều cần thiết đối với nhiều tác vụ phổ biến trong JavaScript, vì điều này có thể cho phép bạn làm nhiều việc từ cài đặt báo cáo lặp lại đến hiển thị ngày tháng và lịch biểu theo múi giờ chính xác.

Tags:

Các tin liên quan