JavaScript Date Object: การเปรียบเทียบวันที่

ใช้ Date Object เปรียบเทียบวันที่และเวลา เพื่อ render logic แบบ conditional บทความนี้ดูวิธีเปรียบเทียบ 2 วันที่ ว่าตัวไหนมากกว่า/น้อยกว่า

การตั้งค่า Date Object

JavaScript มี built-in Date Object สร้างด้วย:

const date = new Date("09-20-2020"); // 2020-09-20T07:00:00.000Z

เวลา (หลัง T) แตกต่างตาม timezone หากต้องการ UTC ใช้ +HH:MM หรือ -HH:MM แทน Z

เมธอด getTime()

แปลง Date Object เป็นตัวเลข (milliseconds นับจาก epoch: Jan 1, 1970) เพื่อเปรียบเทียบง่าย

const date = new Date("09-20-2020");
date.getTime(); // 1600585200000

โจทย์: เปรียบเทียบ 2 วันที่

รับ 2 สตริงวันที่และ comparison operator คืนวันที่ที่มากที่สุดหรือน้อยที่สุดตาม operator

ขั้นตอนแก้ปัญหา

1. แปลง 2 สตริงเป็น Date Objects
2. ใช้ getTime() ได้ milliseconds
3. ใช้ conditional/ternary เลือกวันที่ตาม operator
4. แปลง milliseconds กลับเป็น date string คืนค่า

ตัวอย่างโค้ดทำงาน

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Date Comparison</title>
</head>
<body>
  <h1>Date Comparison</h1>
  <label>Comparison:</label>
  <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>
  <br/>
  <label for="date-1">Date 1:</label>
  <input id="date-1" type="date" name="date1"/>
  <label for="date-2">Date 2:</label>
  <input id="date-2" type="date" name="date2"/>
  <input id="submit-button" type="submit"/>
  <div id="demo"></div>
  <script>
    const handleSubmit = (date1, date2, compare) => {
      const date1Arr = date1.split("-");
      const date2Arr = date2.split("-");
      // year, month (0-based), day
      const d1 = new Date(date1Arr[0], date1Arr[1] - 1, date1Arr[2]).getTime();
      const d2 = new Date(date2Arr[0], date2Arr[1] - 1, date2Arr[2]).getTime();
      // getTime: milliseconds since Jan 1 1970. ค่ามากกว่า = วันที่หลังกว่า
      let timeDisplay;
      if (compare === ">=") {
        timeDisplay = d1 >= d2 ? d1 : d2;
      } else {
        timeDisplay = d1 < d2 ? d1 : d2;
      }
      const timetoDisplay = new Date(timeDisplay);
      document.getElementById("demo").innerHTML = timetoDisplay.toDateString();
    };
    const date_1 = document.getElementById("date-1");
    const 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>

สรุป

Dates ใน JavaScript อาจสับสนตอนแรก แต่ฝึกแล้วจะคล่อง แนะนำลองทำ: เรียง array ของ items ตามวันที่ added (ascending/descending)