日期选择器年份一致性校验异常：手动输入未完成即触发校验的解决

我懂你遇到的麻烦——手动输入日期时，刚敲了个年份数字就触发了校验，弹出莫名其妙的提示，这显然不是我们想要的效果。问题出在change事件的触发时机上：它会在输入框内容每一次变化时就执行，哪怕你还没输完完整的日期格式，这时候生成的Date对象是无效的，自然会引发错误判断。

下面给你两个实用的优化方案，都能完美解决这个问题：

方案一：改用blur事件触发校验（最简单直接） #

把to输入框的change事件换成blur，这样只有当用户输入完成并点击离开输入框时，才会执行校验逻辑。同时我们增加日期有效性检查，确保只有合法的日期才会进行年份比较：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="from">from</div>
<input id="from" type="date">
<div class="to">to</div>
<input id="to" type="date">

<script>
$("#from").on("change", function() { 
  year(); 
  var from = $("#from").val(); 
  if (from) { 
    var maxYear = new Date(from).getFullYear(); 
    $("#to").attr("max", maxYear+"-12-31"); 
    $("#to").attr("min", maxYear+"-01-01"); 
  } 
}); 

// 改用blur事件，用户离开输入框时才校验
$("#to").on("blur", function(){ 
  year(); 
}); 

function year() { 
  var from = $("#from").val(); 
  var to = $("#to").val(); 
  
  if(from && to) {
    const fromDate = new Date(from);
    const toDate = new Date(to);
    
    // 先判断日期是否有效，无效的话直接跳过后续逻辑
    if(isNaN(fromDate.getTime()) || isNaN(toDate.getTime())) {
      return;
    }
    
    if(fromDate.getFullYear() !== toDate.getFullYear()) { 
      $("#to").val(""); 
      alert("OK"); 
    }
  }
} 
</script>

方案二：使用防抖函数优化input事件（更友好的实时体验） #

如果你希望用户输入完成后稍等片刻就自动校验，不需要手动离开输入框，可以用防抖函数延迟校验执行，避免频繁触发：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="from">from</div>
<input id="from" type="date">
<div class="to">to</div>
<input id="to" type="date">

<script>
// 防抖函数：延迟指定时间后执行回调，避免频繁触发
function debounce(func, delay = 500) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, arguments), delay);
  };
}

$("#from").on("change", function() { 
  year(); 
  var from = $("#from").val(); 
  if (from) { 
    var maxYear = new Date(from).getFullYear(); 
    $("#to").attr("max", maxYear+"-12-31"); 
    $("#to").attr("min", maxYear+"-01-01"); 
  } 
}); 

// 给input事件绑定防抖后的校验函数
$("#to").on("input", debounce(function(){ 
  year(); 
})); 

function year() { 
  var from = $("#from").val(); 
  var to = $("#to").val(); 
  
  if(from && to) {
    const fromDate = new Date(from);
    const toDate = new Date(to);
    
    if(isNaN(fromDate.getTime()) || isNaN(toDate.getTime())) {
      return;
    }
    
    if(fromDate.getFullYear() !== toDate.getFullYear()) { 
      $("#to").val(""); 
      alert("OK"); 
    }
  }
} 
</script>

关键优化点说明： #

1. 事件触发时机调整：要么用blur等待用户输入完成离开，要么用防抖延迟校验，彻底避免输入过程中的误触发。
2. 日期有效性检查：通过isNaN(date.getTime())判断生成的Date对象是否有效，只有合法日期才进行年份比较，杜绝无效日期导致的错误逻辑。
3. 保留原有选择器限制：依然保留了对to输入框max和min属性的设置，确保日期选择器的下拉选择功能正常，只能选择与from同一年的日期。

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