使用JavaScript计算用户输入日期差值时出现Invalid Date错误如何解决

• 取值时机错误：你将读取输入框值、解析日期、计算差值的逻辑写在了script标签的顶层，页面加载完成时就会立即执行这部分代码。此时用户还没有选择任何日期，输入框的值为空，new Date() 解析空值就会返回 Invalid Date，后续差值计算也会异常。
• 未阻止表单默认提交行为：你用了 type="submit" 的按钮，点击后会触发表单默认提交逻辑，刷新当前页面，就算调整了取值时机也会因为页面刷新导致执行异常。
• document.write 方法会清空整个页面原有内容，使用体验较差。

<!DOCTYPE html>
<html>
<head>
    <title>作业时间计算器</title>
</head>
<body>

<h1>作业时间计算器</h1>
    
<form>
    <label for="StartDate">开始日期：</label>
    <input id="StartDate" name="StartDate" type="date"/>

    <label for="DueDate">截止日期：</label> 
    <input id="DueDate" name="DueDate" type="date"/>
    
    <input type="submit" value="提交计算" onclick="displayDates(event)">
</form>
<div id="result"></div>
    
<script type = "text/javascript" >
function displayDates(e) {
    // 阻止表单默认提交刷新
    e.preventDefault()
    // 仅在用户点击提交时读取已选择的日期值
    var startInput = document.getElementById("StartDate").value;
    var dueInput = document.getElementById("DueDate").value;
    // 非空校验
    if(!startInput || !dueInput) {
        document.getElementById('result').innerText = '请先选择开始日期和截止日期'
        return
    }
    var startDate = new Date(startInput);
    var dueDate = new Date(dueInput);
    // 计算日期差
    var DifferenceInTime = dueDate.getTime() - startDate.getTime();
    var DifferenceInDays = DifferenceInTime / (1000 * 3600 * 24);
    // 输出结果
    document.getElementById('result').innerHTML = "你需要在 " + startDate.toLocaleDateString() + " 前开始作业<br>"
            + "在 " + dueDate.toLocaleDateString() + " 前提交作业<br>"
            + "你共有 " + DifferenceInDays + " 天时间完成作业";
}
</script>

</body>
</html> 

• 把读取输入、日期解析、差值计算的逻辑全部移到 displayDates 函数内部，确保只有用户点击提交按钮、已经选择好日期后才会执行相关逻辑
• 新增事件参数阻止表单默认提交刷新行为，避免页面重置
• 新增专门的结果展示容器替代 document.write，不会清空原有页面内容，同时增加了非空校验避免异常提交
• 优化：使用 toLocaleDateString() 方法格式化日期输出，显示效果更符合中文使用习惯

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