Format Date trong HTML

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

// Đối tượng thời gian hiện tại
var d = new Date();
 
d.getDate();
d.getDay();
d.getFullYear();
d.getYear();
d.getHours();
d.getMilliseconds();
d.getMinutes();
d.getMonth();
d.getSeconds();
d.getTime();

Lưu ý: với hàm lấy ngày trong tuần getDay() bạn phải cộng lên một thì mới có kết quả chính xác vì nó tính từ 0.

2. Các nhàm nhóm Date Set trong Javascript

Tương ứng với mỗi hàm Date Get thì sẽ có một hàm Date Set (trừ hàm getDay()).

• setDate() thiết lập ngày (1 - 31)
• setFullYear() thiết lập năm đầy đủ (YYYY)
• setYear() thiết lậpnăm 2 số cuối (YY)
• 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.

Lưu ý:

• Vì đây là hàm set nên bạn phải truyền tham số vào.
• Các hàm có ảnh hưởng lẫn nhau nhé các bạn, ví dụ bạn thiết lập ngày giờ không đúng thì 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 miniseconds.

// Đối tượng thời gian hiện tại
var d = new Date();
 
d.setDate(20);
d.setFullYear(2011);
d.setHours(2);
d.setMilliseconds(2);
d.setMinutes(3);
d.setMonth(4);
d.setSeconds(5);

3. Tạo đồng hồ online bằng Javascript

Để các bạn hiểu rõ hơn về ứng dụng của các hàm trong đối tượng Date thì mình sẽ làm một ví dụ hiển thị đồng hồ online, đây là đồng hồ được lấy từ giờ của hệ thống máy tính Client.

- Trong bài hướng dẫn trước, tôi có nói đến việc để tạo một đối tượng ngày tháng thì ta phải sử dụng cấu trúc new Date() và cấu trúc new Date() thì được chia làm bốn dạng cú pháp chính:

• Cú pháp 1: new Date()
• Cú pháp 2: new Date(milliseconds)
• Cú pháp 3: new Date(year, month, day, hours, minutes, seconds, milliseconds)
• Cú pháp 4: new Date(chuỗi ngày tháng)

- Trong bốn cú pháp trên: Cú pháp 1-2-3 thì quá đơn giản và đã được giải thích cụ thể trong bài hướng dẫn trước. Riêng cú pháp thứ tư, cách định dạng một chuỗi ngày tháng hơi phức tạp.

- Do đó, ở bài này, tôi sẽ hướng dẫn cụ thể cách định dạng một chuỗi ngày tháng để sử dụng trong cú pháp new Date(chuỗi ngày tháng)

- Trong JavaScript có bốn kiểu cơ bản để định dạng một chuỗi ngày tháng:

• Short Date
• Long Date
• Full Date
• ISO Date

- Dưới đây là ví dụ minh họa về ngày 12 tháng 3 năm 1974 được định dạng bởi bốn kiểu trên:

KiểuĐịnh dạngShort Date"03/12/1974"Long Date"Mar 12 1974"Full Date"Tue Mar 12 1974"ISO Date"1974-03-12"

1) Short Date

- Một chuỗi ngày tháng được định dạng theo kiểu Short Date sẽ có cấu trúc là:

MM/DD/YYYY

Tạo đối tượng ngày tháng với thời điểm là: ngày 12 tháng 3 năm 1974

---

Xem ví dụ

2) Long Date

- Một chuỗi ngày tháng được định dạng theo kiểu Long Date sẽ có cấu trúc là:

Month DD YYYY

- Lưu ý:

• Month là tháng được viết theo tên tiếng anh.
  (có thể viết đầy đủ như January hoặc viết tắt từ ba ký tự đầu tiên của nó như Jan)
• Month và DD có thể hoán đổi vị trí cho nhau.

Tạo đối tượng ngày tháng với thời điểm là: ngày 12 tháng 3 năm 1974
(Cả bốn đối tượng bên dưới đều như nhau)

---

Xem ví dụ

3) Full Date

- Một chuỗi ngày tháng được định dạng theo kiểu Full Date sẽ có cấu trúc là:

Day Month DD YYYY

- Lưu ý:

• Day là ngày trong tuần (hay còn gọi là thứ) được viết theo tên tiếng anh.
  (có thể viết đầy đủ như Wednesday hoặc viết tắt từ ba ký tự đầu tiên của nó như Wed)
• Month là tháng được viết theo tên tiếng anh.
  (có thể viết đầy đủ như January hoặc viết tắt từ ba ký tự đầu tiên của nó như Jan)

Tạo đối tượng ngày tháng với thời điểm là: ngày 12 tháng 3 năm 1974
(Cả hai đối tượng bên dưới đều như nhau)

---

Xem ví dụ

4) ISO Date

- Một chuỗi ngày tháng được định dạng theo kiểu ISO Date sẽ có cấu trúc là:

YYYY-MM-DD

Tạo đối tượng ngày tháng với thời điểm là: ngày 12 tháng 3 năm 1974

---

Xem ví dụ

5) Thêm thời gian vào chuỗi ngày tháng

- Để thêm thời gian (giờ, phút, giây) vào chuỗi ngày tháng thì ta đặt dấu cách HH:MM:SS vào phía sau chuỗi ngày tháng.

- Riêng kiểu định dạng ISO Date thì ta đặt THH:MM:SS vào phía sau chuỗi ngày tháng.

Tạo đối tượng ngày tháng với thời điểm là: ngày 12 tháng 3 năm 1974, lúc 9 giờ 30 phút

---

Xem ví dụ

6) Chuỗi ngày tháng theo giờ tiêu chuẩn UTC

- Ta có thể thêm chữ Z vào cuối chuỗi ngày tháng để thiết lập chuỗi ngày tháng đó được xác định theo giờ tiêu chuẩn UTC.