使用JavaScript重置日期输入：为何声明的变量赋值无法生效？

原理说明 #

两者的作用完全不同，差异来自JS的基础类型值传递规则：

• 你代码中var date = document.getElementById("date").value这一步，是把输入框DOM的value属性对应的字符串值，复制了一份赋值给局部变量date。字符串属于JS基础类型，赋值是值拷贝，完成赋值后这个局部变量和DOM的value属性就没有任何关联了，是两个独立的存储值。
• 你执行date = ""的时候，修改的只是这个临时局部变量的值，根本没有接触到输入框DOM的value属性，输入框的显示是和DOM属性绑定的，自然不会生效。
• 而document.getElementById("date").value = ""是直接选中对应的DOM元素，修改它自带的value属性，会直接同步到输入框的显示上，所以可以正常重置。

优化后的代码参考 #

你可以提前把DOM引用存下来，避免重复查询DOM，同时优化日期比较的逻辑，避免时分秒带来的判断误差：

function validate_date() {
    // 缓存DOM元素引用，后续操作更高效
    const dateInput = document.getElementById("date");
    const inputDate = new Date(dateInput.value);
    const today = new Date();
    // 统一把两个日期的时分秒清零，只比较日期部分
    inputDate.setHours(0, 0, 0, 0);
    today.setHours(0, 0, 0, 0);

    if (inputDate <= today) {
        alert("日期不能是当天或过去的时间！");
        dateInput.value = "";
    }
}

<input type="date" name="date" id="date" onblur="validate_date();">

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