Đối tượng date trong javascript - định dạng format date

Bài 19: Đối tượng Number trong Javascript (cách tạo và cách sử dụng)

Trong bài này chúng ta sẽ tìm hiểu đến đối tượng Date trong Javascript, qua đó bạn sẽ biết cách định dạng format ngày giờ trong JS.

Date là một đối tượng chuyên dùng để xử lý ngày giờ trong Javascript. Vì nó là ngôn ngữ ở client nên thời gian mà nó lấy được chính là thời gian được thiết lập trên máy của client. Vì vậy, khi lập trình thì bạn không nên lấy thông tin ngày giờ từ JS để lưu trữ vào hệ thống mà thay vào đó hãy sử dụng ngôn ngữ phía server.

1. Đối tượng Date trong Javascript

Date là một object (đối tượng) giúp lập trình viên lấy được thời gian hiện tại ở máy khách client, qua đó sẽ xử lý những chức năng cần đến thông số thời gian này.

Ví dụ, trang web bạn cần thiết lập thời gian cứ 1 phút là tự động reload trang thì lúc này có thể sử dụng đối tượng Date để tính toán.

Cú pháp khởi tạo của date trong JS như sau

// Cách 1
var timeObj = new Date();
var timeObj = new Date(value);
var timeObj = new Date(dateString);
 
// Cách 2
var timeObj = new Date(year, monthIndex);
var timeObj = new Date(year, monthIndex, day);
var timeObj = new Date(year, monthIndex, day, hours);
var timeObj = new Date(year, monthIndex, day, hours, minutes);
var timeObj = new Date(year, monthIndex, day, hours, minutes, seconds);
var timeObj = new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds);

Chúng ta có hai cách dùng như sau:

Cách thứ nhất: Truyền vào tham số là chuỗi hoặc một giá trị.

• Nếu bạn không truyền tham số nào vào thì nó sẽ trả về ngày giờ hiện tại, tức là ngay thời điểm chạy lệnh.
• dateString là một chuỗi định dạng ngày tháng cần lấy.
• value cũng có thể là một dãy số được chuyển từ ngày giờ cần lấy sang miliseconds

Cách thứ hai: Nó có tối đa là 7 tham số truyền vào:

• year là năm cần lấy
• monthIndex là tháng cần lấy
• day là ngày trong tháng cần lấy
• hours là giờ cần lấy
• minuites là phút cần lấy
• seconds là giây cần lấy

Dưới đây là một vài ví dụ tổng hợp:

let today = new Date()
let birthday = new Date('December 17, 1995 03:24:00')
let birthday = new Date('1995-12-17T03:24:00')
let birthday = new Date(1995, 11, 17)           
let birthday = new Date(1995, 11, 17, 3, 24, 0)

Ví dụ dưới đây mình đang lấy thời gian hiện tại trên máy khách client.

var dateObj = new Date();
document.write(dateObj);

Ví dụ sau đây là bốn cách khởi tạo thông thường nhất.

// Thời gian hiện tại
new Date();
 
// Tham số truyền vào là mili giây
new Date(milliseconds);
 
// Tham số truyền vào là chuỗi ngày tháng
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: mini giây
new Date(year, month, day, hours, minutes, seconds, milliseconds);

Khi bạn truyền tham số vào thì đối tượng đó sẽ tự nhận diện và chuyển đổi về đúng định dạng ngày tháng nên bạn cứ yên tâm nhé.

Ví dụ: Khởi tạo một đối tượng với giá trị là ngày 20/11/2013

var dateObj = new Date(2013, 11, 20);

Cái khó ở phần này là định dạng format của ngày tháng khi in ra ngoài trình duyệt rất khó đọc, điều này cũng bình thường bởi vì nó có quy tắc format riêng.

2. Định dạng (format) của Date trong Javascript

Có ba định dạng chính đó là:

• ISO
• Long
• Short

Định dạng ISO

Định dạng chuẩn của ISO 8601 là (YYYY-MM-DD) hoặc (YYYY-MM) hoặc (YYYY).

Có một lưu ý nếu bạn truyền vào không đủ (ngày - tháng - năm - giờ - phút - giây) thì mặc định các tham số khác sẽ lấy thời gian nhỏ nhất.

var ISO_1 = new Date("2014-11-20");
var ISO_2 = new Date("2014-11");
var ISO_3 = new Date("2014");

Định dạng Long

Định dạng Long 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.

var LONG_1 = new Date("Mar 25 2015");
var LONG_2 = new Date("2015 Mar 25");
var LONG_3 = new Date("25 2015 Mar");

Chạy lên các bạn thấy cả ba ví dụ đều có kết quả như nhau.

Định dạng Short

Định dạng 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/

var SHORT_1 = new Date("03-25-2015");
var SHORT_2 = new Date("03/25/2015");
var SHORT_3 = new Date("2015/03/25");
var SHORT_4 = new Date("2015-03-25");

Định dạng đầy đủ

Trên là những định dạng ghi tắt, nếu truyền đầy đủ thì bạn phải truyền đẩy đủ (ngày - tháng - năm - giờ - phút - giây - timezone):

var d = new Date("Wed Mar 25 2015 09:56:24 GMT+0100 (W. Europe Standard Time)");

3. Date javascript format dd/mm/yyyy

Đối với người Việt thì định dạng thường được sử dụng nhất đó là dd/mm/yyyy. Vậy cách khai báo nó như thế nào?

Trong Javascript không hỗ trợ định dạng này vì nó đang sử dụng chuẩn quốc tế. Bạn phải sử dụng một thủ thuật chuyển đổi đơn giản như sau:

function getDDMMYYY(dateString) {
    var dateParts = dateString.split("/");
 
    // Tháng bắt đầu từ 0 nên ta phải giảm đi 1: dataParts[1] - 1
    return new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0]); 
}
getDDMMYYYY('23/10/2015');

4. Lời kết

Vậy là chúng ta đã tìm hiểu xong đối tượng Date trong Javascript. Qua bài này bạn cũng đã biết được các định dạng format của đối tượng date, cách truyền các tham số vào hàm khởi tạo của Date như thế nào. Hẹn gặp lại các bạn ở bài tiếp theo.

Bài 23: Các hàm xử lý ngày tháng trong Javascript