Định dạng ngày tháng năm trong html

Độc lập với định dạng đầu vào, JavaScript sẽ (theo mặc định) xuất ngày tháng dưới dạng chuỗi văn bản đầy đủ:

Wed Mar 25 2015 07:00:00 GMT+0700 (ICT)

Định dạng ngày tháng ISO trong JavaScript

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) cũng khớp hoàn hảo với định dạng ngày tháng của JavaScript:

Ví dụ (dạng ngày tháng đầy đủ)

var d = new Date("2015-03-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 giữa 24 tháng ba và 25 tháng ba.

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

Ví dụ (Năm và tháng)

var d = new Date("2015-03");

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ừ 28 tháng hai đến mùng 1 tháng ba.

Nó có thể được viết dưới dạng không có tháng lẫn ngày (YYYY):

Ví dụ (chỉ năm)

var d = new Date("2015");

Múi giờ có thể ảnh hưởng tới kết quả trên. Kết quả sẽ biến thiên nếu thời gian trong khoảng từ 31 tháng mười hai 2014 đến mùng 1 tháng một năm 2015.

Nó có thể được viết có thêm thông tin giờ, phút, và giây (YYYY-MM-DDTHH:MM:SS)

Ví dụ (Dạng đầy đủ bổ sung giờ, phút và giây)

var d = new Date("2015-03-25T12: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.

UTC (Universal Time Coordinated) cũng giống với GMT (Greenwich Mean Time).


JavaScript Short Dates.

Short dates hầu như được viết với cú pháp “MM/DD/YYYY” giống như thế này:

Ví dụ

var d = new Date("03/25/2015");

JavaScript cũng chấp nhận “YYYY/MM/DD”:

Ví dụ

var d = new Date("2015/03/25");

Tháng được viết trước ngày trong tất cả các dạng short date và định dạng ngày ISO.

Bắt đầu với số 0 CẢNH BÁO !

Trong hầu hết các trình duyệt, ngày tháng ISO với tháng hoặc ngày không có số 0 ở đầu (các tháng nhỏ hơn 10) sẽ được hiểu là short dates:

Ví dụ

var d = new Date("2015-03-25");

JavaScript Long Dates.

Long dates thường được viết với cú pháp “MMM DD YYYY” giống như thế này:

Ví dụ

var d = new Date("Mar 25 2015");

Tháng và ngày có thể thay đổi vị trí:

Ví dụ

var d = new Date("25 Mar 2015");

Và tháng có viết dưới dạng đầy đủ (January) hoặc rút gọn (Jan):

Ví dụ

var d = new Date("2015-03-25");
0

Ví dụ

var d = new Date("2015-03-25");
1

Dấu phẩy được bỏ quả, và nó không nhạy cảm với cách viết HOA hoặc thường:

Ví dụ

var d = new Date("2015-03-25");
2

Định dạng ngày tháng đầy đủ

JavaScript chấp nhận chuỗi ngày tháng trong “định dạng JavaScript đầy đủ”:

Ví dụ

var d = new Date("2015-03-25");
3

JavaScript sẽ bỏ qua lỗi trong cả tên ngày và trong ngoặc thời gian:

Ví dụ

var d = new Date("2015-03-25");
4

Múi giờ

JavaScript chấp nhận các múi giờ sau:

Time ZoneMô tảUTCCoordinated Universal TimeGMTGreenwich Mean TimeEDT(Mỹ) Eastern Daylight TimeCDT(Mỹ) Central Daylight TimeMDT(Mỹ) Mountain Daylight TimePDT(Mỹ) Pacific Daylight TimeEST(Mỹ) Eastern Standard TimeCST(Mỹ) Central Standard TimeMST(Mỹ) Mountain Standard TimePST(Mỹ) Pacific Standard Time

Khi thiết lập ngày tháng, nếu không chỉ định múi giờ, JavaScript sẽ sử dụng múi giờ của trình duyệt.

Khi lấy ngày tháng, nếu không chỉ định múi giờ, kết quả sẽ chuyển đổi sang múi giờ của trình duyệt.

Nói cách khác: Nếu ngày/thời gian được tạo trong GMT (Greenwich Mean Time), ngày/thời gian sẽ được chuyển đổi sang CDT (Central US Daylight Time) nếu người dùng trình duyệt đến từ trung tâm Mỹ.

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.