如何在JavaScript中自动计算两个日期的天数差（无需按钮触发）

要实现输入第二个日期时自动算出天数差并显示在下方span里，直接给日期输入框绑定输入事件，实时计算更新结果即可，具体实现如下：

修改后的HTML代码 #

<div class="row mx-auto">
    <div class="col">
        <label for="from">起始日期</label>
        <input type="date" required class="form-control" name="from" id="from">  
    </div>
    <div class="col">
        <label for="to">结束日期</label>
        <input type="date" required class="form-control" name="to" id="to">
    </div>
    <span id="dayDiff">两个日期的天数差将显示在这里</span>
</div>

对应的JavaScript代码 #

// 获取页面元素
const fromDateInput = document.getElementById('from');
const toDateInput = document.getElementById('to');
const dayDiffSpan = document.getElementById('dayDiff');

// 计算天数差的核心函数
function calculateDayDifference() {
    const fromDate = new Date(fromDateInput.value);
    const toDate = new Date(toDateInput.value);

    // 校验日期是否完整选择
    if (!fromDate || !toDate) {
        dayDiffSpan.textContent = "请选择完整的日期范围";
        return;
    }

    // 计算时间差并转换为天数，取绝对值避免日期顺序问题
    const timeDiff = Math.abs(toDate - fromDate);
    const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

    dayDiffSpan.textContent = `两个日期相差 ${dayDiff} 天`;
}

// 给两个输入框绑定输入事件，实时触发计算
fromDateInput.addEventListener('input', calculateDayDifference);
toDateInput.addEventListener('input', calculateDayDifference);

补充说明 #

• 给输入框添加id是为了更便捷地获取元素，也可以用document.querySelector('[name="from"]')替代
• 使用Math.abs可以保证不管结束日期早于还是晚于起始日期，都能得到正数的天数差
• 如果需要计算包含部分天数的情况（比如跨天的短时间差也算1天），可以把Math.floor换成Math.ceil

内容的提问来源于stack exchange，提问作者Jon