JS实现datepicker非法日期拦截后alert报错弹窗无法关闭问题求助

根因说明 #

你当前的代码绑定了change和blur两个事件都会触发日期校验，当输入非法日期触发catch分支弹alert时，点击alert确认按钮会把焦点重新切回datepicker对应的输入框，只要焦点再次离开输入框就会重新触发blur事件，再次校验非法值又弹出alert，形成死循环，导致看起来弹窗永远关不掉。

修复要点 #

• 移除重复的事件绑定，优先使用jQuery UI Datepicker自带的onClose回调处理输入后的校验，避免和原生blur/change事件的焦点逻辑冲突
• 校验不通过时除了提示，先清空输入框的非法值，避免后续事件再次触发相同报错
• 优先使用非抢占焦点的提示方式替代alert，如果必须用alert可以加个单次触发的状态锁避免循环

修改后可运行代码 #

$(function() {
  var dateFormat = "mm/dd/yy";
  var beginDate = $("#dobEdit").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    changeYear: true,
    // 用datepicker自带的关闭回调处理校验，避免焦点冲突
    onClose: function(selectedDate) {
      $(this).datepicker("option", "minDate", getDate(this));
    }
  });

  function getDate(element) {
    var date;
    try {
      date = $.datepicker.parseDate(dateFormat, element.value);
    } catch (error) {
      alert("输入的日期格式非法，请输入合法的mm/dd/yy格式日期");
      // 清空非法值，避免后续再次触发相同报错
      element.value = "";
      return null;
    }
    return date;
  }
});

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