Ngày giờ trong JavaScript

Trong hướng dẫn tự học Lập trình JavaScript này, bạn sẽ học cách làm việc với ngày và giờ trong JavaScript (Date time).

Ngày giờ trong JavaScript

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

Date là một đối tượng JavaScript được tích hợp sẵn. Nó cho phép bạn lấy giờ của người dùng bằng cách truy cập vào đồng hồ của máy tính thông qua trình duyệt.

Đối tượng Date cũng cung cấp một số phương pháp để quản lý, thao tác và định dạng ngày và giờ.

2. Tạo một đối tượng Date

Trước khi bắt đầu làm việc với ngày và giờ, chúng ta cần tạo một đối tượng Date.

Không giống như các đối tượng được dựng sẵn khác, chẳng hạn như mảng hoặc hàm, ngày tháng không có dạng literals tương ứng.

Tất cả các đối tượng ngày tháng cần được tạo bằng cách sử dụng hàm khởi tạo Date là Date().

Có bốn cách khác nhau để tạo đối tượng Date trong JavaScript.

2.1. Sử dụng cú pháp new Date()

Bạn chỉ cần khai báo một đối tượng Date mới mà không cần khởi tạo giá trị của nó.

Trong trường hợp này, giá trị ngày và giờ sẽ được đặt thành ngày và giờ hiện tại trên thiết bị của người dùng.

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

2.2. Sử dụng cú pháp new Date(year, month, ...)

Bạn cũng có thể khởi tạo đối tượng Date bằng cách truyền các tham số sau được phân tách bằng dấu phẩy: year, month, day, hours, minute, seconds và miliseconds.

Các tham số year và month là bắt buộc. Các tham số khác là tùy chọn, có hay không có cũng được.

var d = new Date(2020, 8, 16, 11, 30, 20, 30);
document.write(d);

Ngày này thực tế là ngày 16 tháng 9 năm 2020 lúc 11:30:20 và 30 mili giây.

Lưu ý: Tại sao thiết lập giá trị là 8 mà lại ra tháng 9 thì mời xem phần 4.1 bên dưới bạn nhé.

Bạn có thể bỏ qua phần giờ và chỉ xác định phần ngày nếu bạn muốn.

var d = new Date(2020, 8, 16);
document.write(d);

2.3. Sử dụng cú pháp new Date(dateString)

JavaScript cũng cho phép bạn tạo đối tượng Date bằng cách truyền một chuỗi đại diện cho ngày tháng hoặc ngày giờ, như được minh họa trong ví dụ sau:

var d = new Date("16 September 2020");
document.write(d);

Ngày này đại diện cho ngày 16 tháng 9 năm 2020. Bạn cũng có thể chỉ định các chuỗi như ngày Sep 16 2020 hoặc bất kỳ biến thể hợp lệ nào, JavaScript sẽ tự động xử lý điều đó.

var d = new Date("16 September 2020");
document.write(d);

2.4. Sử dụng cú pháp new Date(miliseconds)

Bạn cũng có thể xác định đối tượng Date bằng cách truyền số mili giây kể từ ngày 1 tháng 1 năm 1970, lúc 00:00:00 GMT.

Thời điểm này được gọi là UNIX epoch vì năm 1970 là năm hệ điều hành UNIX chính thức được giới thiệu.

Đây là một ví dụ:

var d = new Date(1600200000000);
document.write(d);

Ngày trên đại diện cho ngày:

Wed Sep 16 2020 00:00:00 GMT+0700 (Giờ Đông Dương)

Khi bạn đã tạo một phiên bản của đối tượng Date, bạn có thể sử dụng các phương thức của nó để thực hiện các tác vụ khác nhau, chẳng hạn như:

    + Lấy các thành phần khác nhau của ngày

    + Thiết lập hoặc sửa đổi giá trị ngày và giờ riêng lẻ, v.v.

Các phương pháp này được mô tả chi tiết trong phần sau.

Lưu ý: JavaScript cung cấp các phím tắt được gọi là 'literals' để tạo hầu hết các đối tượng gốc mà không cần phải sử dụng toán tử new, như new Object(), new Array(), v.v.

3. Tạo chuỗi ngày giờ trong JavaScript

Đối tượng Date trong JavaScript cung cấp một số phương thức, chẳng hạn như toDateString(), toLocaleDateString(), v.v. để tạo chuỗi ngày ở các định dạng khác nhau.

Đây là một ví dụ:

var d = new Date();
alert(d.toDateString()); // Hiển thị chuỗi ngày viết tắt
alert(d.toLocaleDateString()); // Hiển bị ngày giờ bản địa hóa
alert(d.toISOString()); // Hiển thị ngày giờ theo chuẩn ISO
alert(d.toUTCString()); // Hiển thị ngày giờ chuyển đổi thành UTC time
alert(d.toString()); // Hiển thị chuỗi ngày đầy đủ với múi giờ địa phương

Tương tự, bạn có thể sử dụng các phương thức toLocaleTimeString(), toTimeString() của đối tượng Date để tạo chuỗi thời gian, như được hiển thị trong ví dụ sau:

var d = new Date();
alert(d.toTimeString());
alert(d.toLocaleTimeString());

4. Lấy thành phần cụ thể của ngày giờ trong JS

Khi bạn có một đối tượng ngày tháng thích hợp, một số phương thức có sẵn sẽ giúp bạn trích xuất các thành phần chi tiết từ nó, chẳng hạn như giá trị tháng, ngày, giờ hoặc phút, v.v.

Phần sau đây mô tả các phương thức khác nhau để trích xuất các phần thông tin riêng lẻ từ một đối tượng Date.

4.1. Lấy giá trị Ngày, Tháng, Năm

Đối tượng Date cung cấp một số phương thức như getFullYear(), getMonth(), getDay(), v.v. mà bạn có thể sử dụng để trích xuất các thành phần ngày cụ thể từ đối tượng Date

Chẳng hạn như năm, ngày trong tháng, ngày trong tuần, v.v. . tương ứng.

Ví dụ sau minh họa cách lấy các thành phần ngày cụ thể từ đối tượng Date bằng các phương thức có sẵn:

var d = new Date();
// Trích xuất thành phần ngày tháng năm
alert(d.getDate()); // Lấy ngày trong tháng
alert(d.getDay()); // Hiển thị số ngày trong tuần (0-6)
alert(d.getMonth()); // Hiển thị số tháng trong năm (0-11)
alert(d.getFullYear()); // Hiển thị năm đầy đủ (4 chữ số)

Phương thức getDay() trả về một số đại diện cho ngày trong tuần (từ 0 đến 6) thay vì trả về một tên chẳng hạn như Chủ nhật hoặc Thứ hai.

Theo cách mà nếu đó là Chủ nhật, phương thức trả về 0.

Và nếu đó là thứ Hai, phương thức trả về 1, v.v.

Vì thế, để hiển thị đúng tên thứ như định dạng con người đọc thì bạn cần dùng thêm một câu lệch switch case nữa.

var d = new Date();
switch (d.getDay()) {
    case 0:
        document.write("Chủ Nhật");
        break;
    case 1:
        document.write("Thứ hai");
        break;
    case 2:
        document.write("Thứ ba");
        break;
    case 3:
        document.write("Thứ tư");
        break;
    case 4:
        document.write("Thứ năm");
        break;
    case 5:
        document.write("Thứ sáu");
        break;
    case 6:
        document.write("Thứ bảy");
        break;
    default:
        break;
}

Tương tự như vậy, phương thức getMonth() trả về số tháng (từ 0 đến 11) thay vì tên của tháng.

Ở đây 0 đại diện cho tháng Một.

Do đó, bạn phải lấy giá trị getMonth() trả về công thêm 1 để ra được tháng chính xác:

var d = new Date();
thangHienTai = d.getMonth() + 1;
document.write(thangHienTai);

4.2. Lấy giá trị Giờ, Phút, Giây và Mili giây

Tương tự như trên, đối tượng Date cung cấp các phương thức như getHours(), getMinutes(), getSeconds(), getTimezoneOffset(), v.v. để trích xuất các thành phần thời gian từ đối tượng Date.

var d = new Date();
// Trích xuất thành phần thời gian
alert(d.getHours()); // Hiển thị giờ (0-23)
alert(d.getMinutes()); // Hiển thị phút (0-59)
alert(d.getSeconds()); // Hiển thị giây (0-59)
alert(d.getMilliseconds()); // Hiển thị mili giây (0-999)
alert(d.getTime()); // Hiển thị ngày theo kiểu mili giây từ 1/1/1970
alert(d.getTimezoneOffset()); // Hiển thị độ lệch múi giờ (từ Greenwich Mean Time) theo số phút

Phương thức getHours() trả về số giờ trong ngày (từ 0 đến 23) theo đồng hồ 24 giờ.

Vì vậy, lúc nửa đêm, phương thức trả về 0 và khi là 3:00 chiều, nó trả về 15.

Lưu ý: Đối tượng Date cũng có các phương thức để lấy các thành phần UTC. Chỉ cần đặt UTC ở sau khi lấy thông tin, chẳng hạn như getUTCDate(), getUTCHour(), getUTCMinutes(), v.v.

5. Thiết lập ngày giờ trong JavaScript

Ngoài việc truy xuất các giá trị ngày và giờ, bạn cũng có thể thiết lập hoặc sửa đổi các giá trị này bằng JavaScript.

Điều này thường được sử dụng nhất trong chương trình mà bạn phải thay đổi giá trị của một đối tượng ngày tháng từ một ngày hoặc giờ cụ thể sang một ngày hoặc giờ cụ thể khác.

Hãy xem nó hoạt động như thế nào trong các phần bên dưới đây:

5.1. Thiết lập Ngày, Tháng, Năm

Đối tượng Date cung cấp các phương thức như phương thức setFullYear(), setMonth() và setDate() để thiết lập các thành phần năm, tháng, ngày của đối tượng Date tương ứng.

Ví dụ: Trong ví dụ sau, chúng ta sử dụng phương thức setFullYear() để thay đổi năm hiện tại (từ 2020 thành 2022)

var d = new Date();
d.setFullYear(d.getFullYear() + 2);
alert(d); // Hiển thị ngày trong tương lai

Kết quả chúng ta nhận được là:

Fri Sep 16 2022 14:28:14 GMT+0700 (Giờ Đông Dương)

Tương tự như vậy, bạn có thể sử dụng phương thức setMonth() để đặt hoặc sửa đổi phần tháng của đối tượng Date.

var d = new Date(); // Ngày giờ hiện tại
d.setMonth(0); // Thiết lập tháng về 0 (tháng Một)
document.write(d);

Phương thức setMonth() yêu cầu giá trị nguyên từ 0 đến 11, nếu bạn đặt giá trị của tháng lớn hơn 11, giá trị năm của đối tượng date sẽ được tăng lên.

Nói cách khác, giá trị 12 được truyền vào thì năm sẽ tăng thêm 1 và giá trị tháng được đặt thành 0, như được minh họa trong ví dụ sau:

var d = new Date(2020, 8, 16); // Sep 16 2020
d.setMonth(12); // Truyền giá trị 12 cho hàm setMonth()
document.write(d);

Kết quả nhận được là:

Sat Jan 16 2021 00:00:00 GMT+0700 (Giờ Đông Dương)

Tương tự, bạn có thể sửa đổi phần ngày của đối tượng Date, như sau:

var d = new Date(2020, 8, 16); // Sep 16 2020
d.setDate(15); // Biến hóa lùi về ngày 15
document.write(d);

Phương thức setDate() yêu cầu một giá trị nguyên từ 1 đến 31. Ngoài ra, nếu bạn chuyển các giá trị lớn hơn số ngày trong tháng, tháng sẽ tăng lên.

Ví dụ:

var d = new Date(2020, 8, 16); // Sep 16 2020
d.setDate(36); // Thiết lập ngày thành ngày 06 tháng 10
document.write(d);

Kết quả nhận được là:

Tue Oct 06 2020 00:00:00 GMT+0700 (Giờ Đông Dương)

5.2. Thiết lập Giờ, Phút, Giây

Các phương pháp thiết lập giá trị thời gian cũng khá đơn giản như:

    + setHours(): Thiết lập giờ

    + setMinutes(): Thiết lập phút

    + setSeconds(): Thiết lập giây

    + setMilliseconds(): Thiết lập mili giây

Mỗi phương thức nhận các giá trị nguyên làm tham số

    + Số giờ nằm ​​trong khoảng từ 0 đến 23.

    + Phút và giây nằm trong khoảng từ 0 đến 59

    + Mili giây nằm trong khoảng từ 0 đến 999.

Đây là một ví dụ:

var d = new Date(2020, 8, 9);
d.setHours(9);
d.setMinutes(6);
d.setSeconds(6);
d.setMilliseconds(999);
document.write(d);

Kết quả nhận được là:

Wed Sep 09 2020 09:06:09 GMT+0700 (Giờ Đông Dương)

Như vậy là qua bài viết này mình đã giúp bạn tìm hiểu về đối tượng Date trong JavaScript, cách tạo đối tượng, cách lấy và thiết lập các thành phần Ngày / Tháng / Năm hay là Giờ / Phút / Giây / Mili giây...

Đây là những kiến thức rất hữu ích khi lập trình JavaScript hay LẬP TRÌNH WEB nói chung. hãy luyện tập để thực sự quen thuộc với các phương thức này bạn nhé.

Chúc bạn học tốt.