Cách thêm hours vào đối tượng Date trong JavaScript

Tìm hiểu nhiều cách thêm hours vào đối tượng Date trong JavaScript.

1. Phương thức Date setTime() và Date getTime()

Để thêm hour vào Date trong JavaScript,

1. Gọi phương thức getTime() vào Date để nhận tổng số mili giây kể từ kỷ nguyên Unix.
2. Gọi phương thức setTime() vào Date, chuyển tổng kết quả của getTime() và hours để cộng bằng mili giây.

Một ví dụ sẽ làm rõ điều này:

function addHours(date, hours) {
  const hoursToAdd = hours * 60 * 60 * 1000;
  date.setTime(date.getTime() + hoursToAdd);
  return date;
}
const date = new Date('2022-05-15T12:00:00.000Z');
const newDate1 = addHours(date, 2);
console.log(newDate1); // 2022-05-15T14:00:00.000Z
const newDate2 = addHours(newDate1, 5);
console.log(newDate2); // 2022-05-15T19:00:00.000Z
Code language: JavaScript (javascript)

Phương thức Date getTime() trả về số mili giây đã trôi qua giữa kỷ nguyên Unix và một ngày cụ thể. Kỷ nguyên Unix là ngày 1 tháng 1 năm 1970, 00: 00: 00.000 GMT.

const date = new Date('2022-05-15T12:00:00.000Z');
// Milliseconds since the Unix epoch
console.log(date.getTime()); // 1652616000000Code language: JavaScript (javascript)

Chúng ta chuyển đổi giờ thành mili giây bằng cách nhân với 60 * 60 * 1000 (số mili giây trong một giờ). Điều này là do chúng ta có thể chuyển nó vào phương thức Date setTime (), phương thức này nhận một đối số chỉ định một thời gian nhất định được biểu thị bằng số mili giây kể từ kỷ nguyên Unix.

// May 5, 2022 at 12:00 PM
const date = new Date('2022-05-15T12:00:00.000Z');
const hours = 5;
const hoursToMs = date.getTime() + 5 * 60 * 60 * 1000;
date.setTime(hoursToMs);
// May 5, 2022 at 5:00 PM
console.log(date);Code language: JavaScript (javascript)

Chú ý

Phương thức setTime() thay đổi đối tượng Date mà nó được gọi. Điều này giới thiệu một hiệu ứng phụ vào hàm addHours() của chúng ta. Để tạo một hàm thuần túy, hãy tạo một bản sao của Date và gọi setTime () trên bản sao này, thay vì bản gốc này. Ví dụ:

function addHours(date, hours) {
  const dateCopy = new Date(date.getTime());
  const hoursToAdd = hours * 60 * 60 * 1000;
  dateCopy.setTime(date.getTime() + hoursToAdd);
  return dateCopy;
}
const date = new Date('2022-05-15T12:00:00.000Z');
const newDate = addHours(date, 2);
console.log(newDate); // 2022-05-15T14:00:00.000Z
// Original not modified
console.log(date); // 2022-05-15T12:00:00.000ZCode language: JavaScript (javascript)

Mẹo

Các hàm không sửa đổi trạng thái bên ngoài (tức là các hàm thuần túy) có xu hướng dễ đoán hơn và dễ lý luận hơn.

2. Phương thức  date-fns addHours()

Ngoài ra, bạn có thể sử dụng hàm addHours() thuần túy từ gói NPM date-fns để nhanh chóng thêm hours vào Date.

import { addHours } from 'date-fns';
const date = new Date('2022-05-15T12:00:00.000Z');
const newDate = addHours(date, 4);
console.log(newDate); // 2022-05-15T16:00:00.000Z
// Original not modified
console.log(date); // 2022-05-15T12:00:00.000ZCode language: JavaScript (javascript)

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG