Đối tượng Date trong JavaScript

Ngày đăng: 25/09/2020 - Cập nhật: 29/09/2020

Mục Lục

1. Date trong JavaScript là gì?
2. Định dạng ngày tháng trong JavaScript (Format Date)
3. Một số hàm xử lý ngày giờ trong JavaScript
Tổng kết

Bài học này mình sẽ giới thiệu các bạn đối tượng Date trong JavaScript. Đây là một đối tượng mà chúng ta rất thường sử dụng để xử lý ngày giờ khi lập trình web / app. Cùng theo dõi bài viết nào.

Đối tượng Date trong JavaScript

1. Date trong JavaScript là gì?

Date là một đối tượng được tính hợp sẵn (built-in object) chuyên dùng để xử lý ngày giờ, thời gian trong JavaScript và đương nhiên thời gian thì ứng dụng rất nhiều rồi.

Tất cả các vấn đề liên quan đến thời gian đều nằm trong đối tượng Date, cú pháp khởi tạo đối tượng Date như sau:

	
	let timeObject = new Date();

Đây là cách thường được sử dụng bởi vì nó sẽ lấy thời gian hiện tại trên máy của người dùng, đều này có nghĩa mỗi người dùng sẽ có thời gian khác nhau, phụ thuộc vào lúc họ truy cập, thiết lập trên máy tính.

> Đọc thêm: Đối tượng trong JavaScript

Một số cách khởi tạo đối tượng Date khác:

		
		// Tham số truyền vào là mili giây

		let timeObject = new Date(milliseconds);

		// Tham số truyền vào là chuỗi ngày tháng

		let timeObject = new Date(dateString);

		// Tham số truyền vào gồm

		//  - year:         năm

		//  - month:        tháng

		//  - day:          ngày

		//  - hours:        giờ

		//  - minutes:      phút

		//  - seconds:      giây

		//  - milliseconds: mili giây

		let timeObject = new Date(

		    year,

		    month,

		    day,

		    hours,

		    minutes,

		    seconds,

		    milliseconds

		);

> Lưu ý: Tham số year, month là bắt buộc. Các tham số khác thì là tùy chọn.

Ví dụ:

		
		// Khởi tạo đối tượng với giá trị ngày là : 25/9/2020

		var time = new Date(2020, 9, 25);

		console.log(time);

Bạn thử chạy chương trình xem, kết quả nhận được là gì?

2. Định dạng ngày tháng trong JavaScript (Format Date)

Nếu chúng ta không định dạng thì kết quả hiển thị ngày tháng như trên khá là khó hiểu.

Có 3 dạng ngày tháng chính thường sử dụng là: ISO, Long, Short, Full Date

ISO: “2020-09-25” (Tiêu chuẩn quốc tế: Năm – Tháng – Ngày). Dạng số

Long: “09/25/2020” hoặc “2020/09/25” (Tháng/Ngày/Năm hoặc Năm/Tháng/Ngày). Dạng số

Short: “Oct 25 2020” hoặc “25 Oct 2020” (Tháng Ngày Năm hoặc Ngày Tháng Năm). Tháng là ở dạng chữ

Full Date: “Friday October 25 2020” (Thứ Tháng Ngày Năm). Thứ và tháng là ở dạng chữ

2.1. Định dạng ngày tháng ISO

Định dạng ISO 8601 là tiêu chuẩn quốc tế diễn tả ngày tháng và thời gian

Cú pháp của ISO 8601 (YYYY-MM-DD) nó cũng khớp với định dạng ngày tháng của JavaScript

Ví dụ: Dạng ngày tháng đầy đủ:

	
	let d = new Date("2020-09-25");

Các tính toán ngày tháng sẽ liên quan đến múi giờ của bạn. Phụ thuộc vào múi giờ của bạn, kết quả trên có thể biến thiên.

Nó có thể được viết mà không cần chỉ định ngày (YYYY-MM).

Ví dụ: Chỉ năm và tháng:

	
	let d = new Date("2020-08");

Múi giờ có thể ảnh hưởng đến kết quả. Kết quả sẽ biến thiên nếu thời gian trong khoảng từ 30 tháng 9 đến 1 tháng 10.

Nó có thể được viết mà không chỉ định tháng (YYYY).

Ví dụ: Chỉ có năm:

	
	let d = new Date("2020");

Múi giờ có thể ảnh hưởng đến kết quả trên. Nếu thời gian trong khoảng từ 31 tháng 12 2020 đến 1 tháng 1 năm 2021.

Nó cũng có thể viết thêm thông tin giờ, phút, giây (YYYY-MM-DDHH:MM:SS)

VÍ dụ: Dạng đầy đủ giờ, phút, giây.

	
	let d = new Date("2020-09-27T00:00:00");

Chứ T trong chuỗi ngày tháng, nằm giữa ngày tháng và thời gian, là chỉ thời gian UTC (Universal Time Coordinated).

2.2. Định dạng shortDate

Kiểu ngày giờ Short được lưu trữ dưới dạng MM/DD/YYYY hoặc YYYY/MM/DD hoặc MM-DD-YYYY hoặc YYYY-MM-DD

Ví dụ:

		
		let d_1 = new Date("09-25-2020");

		let d_2 = new Date("09/25/2020");

		let d_3 = new Date("2020/09/25");

		let d_4 = new Date("2020-09-25");

2.3. Định dạng Long Date

Định dạng Long Date tức là bạn truyền vào với tên của tháng là ba chữ cái đầu tiên ghi bằng tiếng Anh, lúc này bạn có thể đặt vị trí của nó thế nào cũng được vì đối tượng Date tự nhận diện và chuyển đổi.

Ví dụ:

		
		let d_1 = new Date("Oct 25 2020");

		let d_2 = new Date("2020 Oct 25");

		let d_3 = new Date("25 2020 Oct");

2.4. Định dạng đầy đủ (Full time)

JavaScript chấp nhận chuỗi ngày tháng trong định dạng JavaScript đầy đủ. Dạng này bạn phải truyền đầy đủ (Ngày Tháng Năm Giờ-Phút-Giây-Timezone)

Ví dụ:

	
	let d = new Date("Fri Oct 25 2020 00:00:00 GMT+0700 (Giờ Đông Dương)");

3. Một số hàm xử lý ngày giờ trong JavaScript

Để thao tác xử lý ngày tháng trong JavaScript hiệu quả chúng ta có hai nhóm hàm chính là lấy dữ liệu ngày giờ (getDate) và thiết lập ngày giờ (setDate)

3.1. Nhóm hàm lấy dữ liệu ngày giờ trong JavaScript

Trong JavaScript có tổng cộng 10 hàm thiết lập thời gian thường sử dụng:

getDate() lấy ngày (1 - 31)

getDay() lấy ngày trong tuần (0 - 6).

getFullYear() lấy năm đầy đủ (YYYY)

getYear() lấy năm dạng rút gọn (Đã không còn sử dụng). Nó sẽ trả về giá trị năm hiện tại trừ đi năm 1900 (VD: Năm 2020 - 1900 bằng 120. Do đó, giá trị 120 sẽ được trả về). Khuyến nghị nên sử dụng getFullYear() thay thì getYear().

getHours() lấy số giờ (0 - 23)

getMiliSeconds() lấy số mili giây (0 - 999)

getMinutes() lấy số phút (0 - 59)

getMonth() lấy tháng (0 - 11)

getSeconds() lấy số giây (0 - 59)

getTime() thời gian đã được convert sang dạng miliseconds kể từ 1/1/1970.

Bạn không cần ghi nhớ hết mà có thể hiểu là có bao nhiêu dữ liệu ngày giờ thì có bấy nhiêu hàm để giúp chúng ta có thể lấy ra đúng dữ liệu ngày giờ đó.

Một số giá trị lấy ra như Tháng và Ngày trong tuần thì sẽ được đại diện bởi các số đếm từ 0 - 11 và từ 0 - 6.

Do đó, để có được ngày tháng đúng thì chúng ta sẽ tiếp tục xử lý, ví dụ:

getDay() trả về gia trị 0 thì tương đương Chủ Nhật, 1 tương đương Thứ Hai, 2 tương đương Thứ Ba

getMonth() trả về giá trị 0 thì tương đương Tháng 1

Nói chung thì cách sử dụng các hàm trên thì khá là đơn giản, nó là phương thức của đối tượng Date nên bạn chỉ việc gọi và sử dụng thôi.

		
		// Tạo đối tượng Date time

		let d = new Date();

		// Lấy các giá trị của đối tượng vừa tạo

		d.getDate();

		d.getDay();

		d.getFullYear();

		d.getYear();

		d.getHours();

		d.getMilliseconds();

		d.getMinutes();

		d.getMonth();

		d.getSeconds();

		d.getTime();

Lưu ý: Các hàm getDay(), getYear(), getMonth() là sẽ hơi khác một chút so với luồng suy nghĩ thông thường. Do đó, hãy luyện tập để nắm bắt được rõ ràng hơn nhé.

3.2. Nhóm hàm thiết lập ngày giờ trong JavaScript

Tương ứng với mỗi hàm Get ta sẽ có 1 hàm Set (không có setDay() bạn nhé). Như vậy ta cũng có 9 hàm thiết lập ngày giờ mà JS cung cấp như sau:

setDate() thiết lập ngày (1 - 31)

setFullYear() thiết lập năm đầy đủ (YYYY). Chấp nhận 4 chữ số từ 1000 cho đến 9999.

setYear() thiết lậpnăm 2 số cuối (YY). Nhưng hiện tại đã không còn được sử dụng. Khuyến nghị nên sử dụng setFullYear() thay vì setYear()

setHours() thiết lập số giờ (0 - 23)

setMiliSeconds() thiết lập số mili giây (0 - 999)

setMinutes() thiết lập số phút (0 - 59)

setMonth() thiết lập tháng (0 - 11)

setSeconds() thiết lập số giây (0 - 59)

setTime() thiết lập thời gian đã được convert sang dạng miliseconds kể từ 1/1/1970.

Lưu ý:

Đây là hàm set nên bạn phải truyền tham số vào.

Các hàm sẽ ảnh hưởng lẫn nhau. Ví dụ, nếu bạn thiết lập ngày giờ không đúng nó sẽ lấy ngày giờ mặc định.

Nếu bạn dùng hàm setTime() để thiết lập thì nó ảnh hướng tới tất cả các giá trị còn lại bởi vì setTime() là hàm thiết lập thời gian đầy đủ đã chuyển sang dạng miliseconds.

Ví dụ:

		
		// Tạo đối tượng thời gian hiện tại

		let d = new Date();

		// Thiết lập ngày giờ

		d.setDate(25);

		d.setFullYear(2020);

		d.setHours(4);

		d.setMilliseconds(1);

		d.setMinutes(2);

		d.setMonth(8);

		d.setSeconds(3);

> Hãy tìm hiểu thêm về cách hàm xử lý thời gian tại Mozilla

Tổng kết

Như vậy, mình đã giới thiệu các bạn cơ bản về Date trong JavaScript, cách thiết lập ngày giờ cũng như một số lưu ý khi xử lý ngày giờ, nó cũng đơn giản đúng không nào.

Chúng ta rất thường sử dụng nó để xử lý khi lập trình web phía client nên bạn hãy chú ý về nó nhé. Hẹn gặp lại các bạn ở bài học tiếp theo.

> Nếu bạn thấy tự học tiến bộ chậm, tham khảo ngay: HỌC LẬP TRÌNH WEB (Full Stack) từ A - Z dành cho người mới bắt đầu học lập trình hoặc chuyển nghề.

Về trang trước Bài tiếp theo

Gửi email in trang