JavaScript 日期選組件：獲取當前日期並實現加減天數顯示

核心需求

• 頁面載入自動顯示今天日期（格式：YYYYMMDD）
• 點擊「+」按鈕日期 +1 天，「-」按鈕日期 -1 天
• 結果即時顯示在 <input type="text"> 中

完整可運行示例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>日期加減示例</title>
  <style>
    .controls { margin-top: 10px; }
    button { padding: 5px 15px; margin-right: 5px; cursor: pointer; }
    input { padding: 5px; font-family: monospace; }
  </style>
</head>
<body>
  <input type="text" id="dateDisplay" readonly style="width: 120px;" />
  <div class="controls">
    <button id="btnSub">- 1 天</button>
    <button id="btnAdd">+ 1 天</button>
  </div>

  <script>
    // 使用 Date 物件操作，避免字串拼接錯誤
    let currentDate = new Date(); // 當地時間 00:00:00

    // 格式化為 YYYYMMDD
    function formatDate(d) {
      const y = d.getFullYear();
      const m = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${y}${m}${day}`;
    }

    function updateDisplay() {
      document.getElementById('dateDisplay').value = formatDate(currentDate);
    }

    // 綁定事件
    document.getElementById('btnAdd').addEventListener('click', () => {
      currentDate.setDate(currentDate.getDate() + 1);
      updateDisplay();
    });

    document.getElementById('btnSub').addEventListener('click', () => {
      currentDate.setDate(currentDate.getDate() - 1);
      updateDisplay();
    });

    // 初始化
    updateDisplay();
  </script>
</body>
</html>

關鍵點解析

1. 用 Date 物件而非字串運算：setDate(getDate() ± 1) 自動處理月份跨越、閏年、年底跨年等邊界情況。
2. 格式化函數：padStart(2,'0') 確保月、日兩位數。
3. 事件綁定用 addEventListener：優於內聯 onclick，結構與行為分離。
4. 唯讀輸入框：防止用戶手動輸入非法格式。

進階擴展建議

• 改用 <input type="date"> 獲得原生日期選擇器（瀏覽器支援良好）。
• 引入 Day.js (2KB) 或 date-fns 處理複雜格式、國際化、時區。
• 加入鍵盤快捷鍵（←/→ 或 ↑/↓）控制日期。
• 若需指定時區（如 UTC），使用 getUTCFullYear() 等方法。

避坑指南：不要嘗試手動拼接字串計算日期（如 myDate++），會導致「20231232」這類非法值。永遠信任 Date 物件的內建邏輯。