PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Đối tượng Date trong Javascript - Định dạng format date

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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

Demo RUN
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.

Demo RUN
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.

Demo RUN
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/

Demo RUN
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.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top