JavaScript 日期變更後計算天數差：格式驗證與解析陷阱

使用 new Date(str) 解析日期字串時，瀏覽器對格式容錯度極低。常見錯誤：輸入框值為 2024/01/01 或含時區資訊，導致 NaN 或時間戳錯誤，進而天數計算異常。

健壯的計算函式

function getDaysDiff(startId, endId) {
    const s1 = $(startId).val().trim();
    const s2 = $(endId).val().trim();
    // 1. 格式驗證：僅接受 yyyy-MM-dd
    const re = /^\d{4}-\d{2}-\d{2}$/;
    if (!re.test(s1) || !re.test(s2)) return 0;

    // 2. 解析：將 - 替換為 / 相容 Safari/IE
    const d1 = new Date(s1.replace(/-/g, '/'));
    const d2 = new Date(s2.replace(/-/g, '/'));

    // 3. 判斷有效性
    if (isNaN(d1) || isNaN(d2)) return 0;

    // 4. 計算天數差 (取絕對值)
    const diffMs = Math.abs(d2 - d1);
    return Math.floor(diffMs / (1000 * 60 * 60 * 24));
}

// 綁定 change 事件
$("#startDate, #endDate").on("change", function() {
    const days = getDaysDiff("#startDate", "#endDate");
    $("#dayCount").val(days);
});

關鍵點總結

1. 嚴格驗證格式，拒絕非標準字串進入 Date 建構子。
2. 替換分隔符 為 /，確保跨瀏覽器相容。
3. 檢查 isNaN 捕獲無效日期 (如 2024-02-30)。
4. 使用 Math.abs 避免開始日期大於結束日期產生負值。

生產環境建議引入 dayjs 或 date-fns 輕量庫，統一解析、格式化、運算邏輯，杜絕原生 Date 坑點。