Đối tượng Date và định dạng hiển thị kiểu ngày trong JavaScript –...

Đối tượng Date trong JavaScript

– Đối tượng Date là kiểu dữ liệu được xây dựng trong ngôn ngữ JavaScript. Một đối tượng Date được tạo với new Date() như sau:

Ví dụ:

var date = new Date();

– Đối tượng Date JavaScript cho phép chúng ta làm việc với các ngày.

Nội dung chính:

Các cách tạo một đối tượng Date
Các dạng hiển thị ngày trong JavaScript
Các dạng input format ngày trong JavaScript

1. Các cách tạo một đối tượng Date

– Một đối tượng Date được tạo ra với constructor new Date()

– Có 4 cách để tạo một đối tượng date:

[code language=”javascript”]new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(date string)
new Date(milliseconds)[/code]

1.1. new Date()

new Date() tạo một đối tượng date với ngày và giờ hiện tại:

Ví dụ:

[code language=”javascript”]var date = new Date();[/code] Try it »

Đối tượng Date là static. Thời gian của máy tính sẽ thay đổi từng khoảnh khắc nhưng đối tượng date thì không.

1.2. new Date(year, month, day, hours, minutes, seconds, milliseconds)

new Date(year, month, …) tạo một đối tượng date với ngày tháng và thời gian xác định:

7 tham số tương ứng với: năm, tháng, ngày, giờ, phút, giây và mili giây.

Ví dụ:

[code language=”javascript”]var date = new Date(2018, 11, 22, 10, 33, 30, 0);[/code] Try it »

JavaScript đếm tháng từ 0 đến 11. Do đó tháng 1 sẽ là số 0. Tháng 12 là số 11.

Các tham số là linh động:

Ví dụ:

[code language=”javascript”]// Chỉ 6 tham số: năm, tháng, ngày, giờ, phút, giây:
var d1 = new Date(2018, 11, 22, 10, 33, 30);

// Chỉ 5 tham số: năm, tháng, ngày, giờ, phút:
var d2 = new Date(2018, 11, 22, 10, 33);

// Chỉ 4 tham số: năm, tháng, ngày, giờ:
var d3 = new Date(2018, 11, 22, 10);

// Chỉ 3 tham số: năm, tháng, ngày:
var d4 = new Date(2018, 11, 22);

// Chỉ 2 tham số: năm, tháng:
var d5 = new Date(2018, 11);[/code] Try it »

Không được bỏ qua tham số tháng. Nếu bạn chỉ cung cấp một tham số, nó sẽ coi tham số đó là mili giây.

Ví dụ:

[code language=”javascript”]var date = new Date(2018);[/code] Try it »

★ Trường hợp là ngày của thế kỷ trước

Khi đó tham số năm có 1 hoặc 2 chữ số thì đều được hiểu là 19xx:

Ví dụ:

[code language=”javascript”]var d1 = new Date(99, 11, 19);
var d2 = new Date(9, 11, 19);[/code] Try it »

1.3. new Date(date string)

new Date(dateString) tạo một đối tượng date từ một chuỗi ngày tháng:

Ví dụ:

[code language=”javascript”]var date = new Date("October 20, 2018 11:12:00");[/code] Try it »

★ JavaScript lưu trữ ngày như là số mili giây

JavaScript lưu trữ ngày là số mili giây kể từ January 01, 1970, 00:00:00 UTC (Universal Time Coordinated).

Thời gian bằng 0 (Zero time) là January 01, 1970 00:00:00 UTC.

1.4. new Date(milliseconds)

new Date(milliseconds) tạo một đối tượng ngày tháng bằng zero time cộng với số mili giây được truyền vào bằng tham số:

Ví dụ:

[code language=”javascript”] // 0 mili giây
var date = new Date(0);[/code] Try it »

1 ngày (24 giờ) thì bằng 86 400 000 giây:

Ví dụ:

[code language=”javascript”]var date = new Date(86400000);[/code] Try it »

01 January 1970 cộng với 100 000 000 000 milliseconds thì ra thời gian vào khoảng 03 March 1973,
01 January 1970 trừ cho 100 000 000 000 milliseconds thì ra thời gian vào khoảng October 31 1966:

Ví dụ:

[code language=”javascript”]var datePlus = new Date(100000000000); // Mar 03, 1973
var dateMinus = new Date(-100000000000); // Oct 31, 1966[/code] Try it »

2. Các dạng hiển thị ngày trong JavaScript

– Theo mặc định, JavaScript sẽ output các ngày theo định dạng chuỗi đầy đủ như sau:

Ví dụ:

[code language=”javascript”]Sun Sep 16 2018 22:08:42 GMT+0900 (Japan Standard Time)[/code] Try it »

– Khi bạn hiển thị một đối tượng ngày trong HTML, nó được tự động chuyển thành một chuỗi, với phương thức toString().

Ví dụ:

[code language=”javascript”]var date = new Date();
document.getElementById("demo").innerHTML = date;[/code]

Tương tự với:

[code language=”javascript”]var date = new Date();
document.getElementById("demo").innerHTML = date.toString();

// Sun Sep 16 2018 22:12:18 GMT+0900 (Japan Standard Time)[/code] Try it »

– Phương thức toUTCString() chuyển đổi một ngày thành một chuỗi UTC (một tiêu chuẩn hiển thị ngày tháng)

Ví dụ:

[code language=”javascript”]var date = new Date();
document.getElementById("demo").innerHTML = date.toUTCString();

// Sun, 16 Sep 2018 13:14:45 GMT[/code] Try it »

– Phương thức toDateString() chuyển đổi một ngày sang định dạng dễ đọc hơn:

Ví dụ:

[code language=”javascript”]var date = new Date();
document.getElementById("demo").innerHTML = date.toDateString();

// Sun Sep 16 2018[/code] Try it »

3. Các dạng input format ngày trong JavaScript

– Thường thì có 3 loại định dạng nhập ngày tháng (date input formats) trong JavaScript:

Loại	Ví dụ
ISO Date	“2015-03-25” (The International Standard)
Short Date	“03/25/2015”
Long Date	“Mar 25 2015” hoặc “25 Mar 2015”

– Định dạng ISO tuân theo tiêu chuẩn nghiêm ngặt (strict standard) trong JavaScript.
– Các định dạng khác không được xác định rõ ràng và có thể là định dạng dành riêng cho trình duyệt.

3.1. JavaScript ISO Dates

– ISO 8601 là tiêu chuẩn quốc tế cho ngày và giờ.

– Cú pháp ngày tháng của ISO 8601 (YYYY-MM-DD) cũng là định dạng ngày tháng JavaScript được đề nghị.

Ví dụ:

[code language=”javascript”]var date = new Date("2018-12-24");

// Mon Dec 24 2018 09:00:00 GMT+0900 (Japan Standard Time)[/code] Try it »

– Ngày được tính sẽ tương ứng với múi giờ của bạn.
– Tùy thuộc vào múi giờ của bạn, kết quả ở trên sẽ thay đổi giữa December 23 và December 24.

● ISO Dates với tham số là Year và Month

Bạn có thể viết ngày ISO mà không chỉ định ngày (YYYY-MM):

Ví dụ:

[code language=”javascript”]var date = new Date("2018-03");

// Thu Mar 01 2018 09:00:00 GMT+0900 (Japan Standard Time)[/code] Try it »

Tùy thuộc vào múi giờ của bạn, kết quả ở trên sẽ thay đổi giữa February 28 và March 01.

● ISO Dates với tham số CHỈ là Year

Bạn có thể viết ngày ISO mà không chỉ định ngày và tháng (YYYY):

Ví dụ:

[code language=”javascript”]var date = new Date("2018");

// Mon Jan 01 2018 09:00:00 GMT+0900 (Japan Standard Time)[/code] Try it »

Tùy thuộc vào múi giờ của bạn, kết quả ở trên sẽ thay đổi giữa December 31 2017 và January 01 2018.

● ISO Dates (Date-Time)

– Bạn có thể viết ngày ISO bằng cách thêm giờ, phút, giây (YYYY-MM-DDTHH:MM:SSZ):

Ví dụ:

[code language=”javascript”]var date = new Date("2018-12-24T12:00:00Z");

// Mon Dec 24 2018 21:00:00 GMT+0900 (Japan Standard Time)[/code] Try it »

– Ngày và giờ tách biệt với nhau bằng chữ hoa T.

– Chữ hoa Z cho biết thời gian theo chuẩn UTC.

– Nếu bạn muốn thay đổi thời gian tương đối so với UTC, hãy xóa Z và thêm +HH:MM hoặc -HH:MM:

Ví dụ:

[code language=”javascript”]var date = new Date("2018-12-24T12:00:00-06:00");

// Tue Dec 25 2018 03:00:00 GMT+0900 (Japan Standard Time)[/code] Try it »

UTC (Universal Time Coordinated) giống như GMT (Greenwich Mean Time).

Việc bỏ qua T hoặc Z trong chuỗi date-time có thể cho kết quả khác nhau trong trình duyệt khác nhau.

★ Múi giờ (Time Zones)

– Khi setting một ngày, mà không chỉ định múi giờ, JavaScript sẽ sử dụng múi giờ của trình duyệt.

Xem thêm: Các phương thức thiết lập ngày cho đối tượng Date.

– Khi getting một ngày, mà không chỉ định múi giờ, kết quả sẽ được chuyển đổi thành múi giờ của trình duyệt.

Xem thêm: Các phương thức lấy thông tin từ đối tượng Date.

3.2. JavaScript Short Dates

Short dates là cách viết với cú pháp là: “MM/DD/YYYY“

Ví dụ:

[code language=”javascript”]var date = new Date("12/24/2018");

// Mon Dec 24 2018 00:00:00 GMT+0900 (Japan Standard Time)[/code] Try it »

★ CHÚ Ý:

Trong một số trình duyệt, tháng hoặc ngày không có số 0 đứng đầu có thể gây ra lỗi:
[code language=”javascript”]var date = new Date("2018-2-24");[/code]

Format date “YYYY/MM/DD” là undefined.
Một số trình duyệt cố gắng đoán định dạng (format) và trả về kết quả đúng. Một số return NaN.
[code language=”javascript”]var date = new Date("2018/02/24");[/code]

Format date “DD-MM-YYYY” cũng là undefined.
Một số trình duyệt cố gắng đoán định dạng (format) và trả về kết quả đúng. Một số return NaN.
[code language=”javascript”]var date = new Date("24-02-2018");[/code]

3.3. JavaScript Long Dates

– Long dates thường được viết với cú pháp là: “MMM DD YYYY“

Ví dụ:

[code language=”javascript”]var date = new Date("Dec 24 2018");

// Mon Dec 24 2018 00:00:00 GMT+0900 (Japan Standard Time)[/code] Try it »

– Ngoài ra chúng ta có thể linh động với nhiều cách viết như sau:

Ví dụ:

[code language=”javascript”]// Tháng và ngày có thể theo bất kỳ thứ tự nào:
var date1 = new Date("Oct 20 2018");
var date2 = new Date("20 Oct 2018");

// Tháng có thể được viết đầy đủ (January) hoặc viết tắt (Jan):
var date3 = new Date("January 20 2018");
var date4 = new Date("Jan 20 2018");[/code] Try it »

★ Date Input – Parsing Dates

– Nếu bạn có một chuỗi ngày hợp lệ, bạn có thể sử dụng phương thức Date.parse() để chuyển đổi nó thành mili giây.

– Date.parse() trả về số mili giây giữa ngày và January 1, 1970:

Ví dụ:

[code language=”javascript”]var msec = Date.parse("March 21, 2012");
document.getElementById("demo").innerHTML = msec;[/code] Try it »

– Sau đó, bạn có thể sử dụng số mili giây để chuyển đổi nó thành đối tượng ngày (date object):

Ví dụ:

[code language=”javascript”]var msec = Date.parse("March 21, 2012");
var date = new Date(msec);
document.getElementById("demo").innerHTML = date;[/code] Try it »