Một việc chúng ta có thể làm khi giải quyết bài toán code là dùng đối tượng Date để so sánh ngày và giờ để có điều kiện render logic nhất định. Bài viết này xem cách dùng Date Object so sánh hai ngày xem ngày nào sau (hoặc trước).
Thiết lập (Setup)
JavaScript có Date Object tích hợp sẵn để truy cập các phương thức hỗ trợ logic dựa trên timestamp. Để thiết lập, khởi tạo Date mới bằng mã sau:
const date = new Date("09-20-2020"); // 2020-09-20T07:00:00.000Z
Nếu bạn console.log(date), thời gian (substring sau T) sẽ khác tùy nơi bạn sống. Nếu muốn làm việc với UTC, bỏ Z và thêm +HH:MM hoặc -HH:MM.
Biết cách thiết lập quan trọng khi làm việc với hàm so sánh ở phần sau.
Xem các phương thức khi dùng Date constructor. Một phương thức là getTime(). Dùng phương thức này đổi Date Object thành số để dễ so sánh.
Phương pháp này chuyển ngày thành số mili giây từ epoch (epoch bắt đầu 1/1/1970). Đây là getTime:
const date = new Date("09-20-2020")
date.getTime(); // 1600585200000
Vì date khởi tạo như Date Object mới, dùng dot notation truy cập hàm getTime.
Khuyên kiểm tra tài liệu cho tất cả phương thức dùng trên Date Object cho logic. Chúng ta sẵn sàng cho bài toán.
Bài toán (The Prompt)
Cho hai chuỗi và toán tử so sánh, trả về ngày là nhỏ nhất hoặc lớn nhất tùy theo toán tử. Đảm bảo hai chuỗi truyền vào có thể chuyển thành Date Object.
Các bước giải quyết
- Đổi hai chuỗi thành Date Object mới. Đừng quên xem cách truyền tham số vào Date constructor!
- Dùng phương thức
getTime()tạo số mili giây từ 1/1/1970. - Dùng câu lệnh điều kiện hoặc ternary tìm ngày cần theo toán tử so sánh.
- Chuyển mili giây thành chuỗi ngày đọc được và trả về.
Thử tự giải quyết trước khi xem giải pháp!
Ví dụ hoàn chỉnh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style> body { font-family: 'Roboto', Courier, monospace } </style>
</head>
<body>
<h1>Date Comparison</h1>
<label for="comparison">So sánh (Chọn một)</label>
<div id="comparison">
<input name="compare" type="radio" id="less" value="<"/>
<label for="less"> < </label>
<input name="compare" type="radio" id="more" checked value=">="/>
<label for="more"> >= </label>
</div>
<br/>
<label for="date-1">Ngày 1:</label>
<input id="date-1" value="" type="date" name="date1" />
<label for="date-2">Ngày 2:</label>
<input id="date-2" value="" type="date" name="date2" />
<input id="submit-button" type="submit" />
<div id="demo"></div>
<script>
const handleSubmit = (date1, date2, compare) => {
// so sánh: getTime mỗi ngày
date1Arr = date1.split("-");
date2Arr = date2.split("-");
// year, month (tháng zero-based), day
let d1 = new Date(date1Arr[0], date1Arr[1] - 1, date1Arr[2]).getTime();
let d2 = new Date(date2Arr[0], date2Arr[1] - 1, date2Arr[2]).getTime();
// getTime lấy mili giây từ 1/1/1970. Số càng lớn, ngày càng sau.
// dùng conditional hoặc ternary trả về so sánh
let timeDisplay;
if(compare === ">=") {
timeDisplay = d1 >= d2 ? d1 : d2;
} else {
timeDisplay = d1 < d2 ? d1 : d2;
}
let timetoDisplay = new Date(timeDisplay);
document.getElementById("demo").innerHTML = timetoDisplay.toDateString();
}
let date_1 = document.getElementById("date-1");
let date_2 = document.getElementById("date-2");
document.getElementById("submit-button").addEventListener("click", (e) => handleSubmit(date_1.value, date_2.value, more.checked ? '>=' : '<'))
</script>
</body>
</html>
Date trong JavaScript có thể gây nhầm lẫn lúc đầu, nhưng với chút thực hành, bạn sẽ nắm ngay. Ở đây, chúng ta xem cách thiết lập Date mới và truy cập phương thức constructor. Chúng ta cũng xem cách so sánh hai ngày xem ngày nào lớn/nhỏ tùy theo toán tử truyền vào hàm.
Khi nắm vững, khuyên xem cách sắp xếp mảng item theo ngày thêm vào, tăng hoặc giảm dần. Chúc vui và tiếp tục!