解决date input新旧日期对比时出现Invalid Date的问题

问题原因 #

• 页面加载时你获取的originalValue是空字符串，将空字符串传入new Date()会得到Invalid Date，无法参与对比
• originalValue仅在页面初始化时赋值一次，后续用户选择日期后，这个变量不会自动更新，导致后续对比始终使用无效的初始值

修正后的代码 #

HTML（无需修改）

<div class="order-date">
    <label for="order-date">発注日</label>
    <input type="date" id="order_date" value="" class="input-style">
</div>

JavaScript

var orderDate = document.getElementById("order_date");
// 初始化原日期为null，表示还未选择过日期
let originalDate = null;

orderDate.addEventListener("change", function(event) {
    const newValue = event.target.value;
    const newDate = new Date(newValue);

    // 只有当原日期存在（已选过日期）且新日期合法时，才进行对比
    if (originalDate && newDate instanceof Date && !isNaN(newDate)) {
        if (newDate < originalDate) {
            alert("you can't select this date.");
            // 触发警告后，恢复输入框的原日期值
            event.target.value = originalDate.toISOString().split('T')[0];
            return;
        }
    }

    // 更新原日期为当前选中的合法日期
    originalDate = newDate;
    console.log(originalDate);
    console.log(newDate);
});

关键说明 #

• 用originalDate存储上一次选择的有效日期对象，初始值设为null，避免无效的空值转换
• 对比前先校验新日期的合法性（!isNaN(newDate)），防止非法日期干扰逻辑
• 触发警告后，将输入框的值恢复为原日期，避免用户输入不符合要求的日期
• 每次合法选择后，更新originalDate，确保下次对比用的是最新的已选日期

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