JQuery Datepicker切换至最大日期月份时跳回最小日期问题求解

嘿，我之前也踩过几乎一模一样的坑！这大概率是日期格式解析的浏览器兼容性问题搞的鬼。

问题根源 #

你直接把"yyyy-MM-dd"格式的字符串传给new Date()，但在IE11和Firefox 60这类较老的浏览器里，早期ECMAScript标准并没有明确规定这种格式的解析规则，导致浏览器会把它解析成无效日期（Invalid Date）。当jQuery Datepicker拿到无效的minDate或maxDate时，内部的日期范围逻辑就会混乱，从而出现切换到最大月份后跳回最小月份的异常行为。

解决方案：手动解析日期字符串 #

我们需要自己写一个简单的函数，把yyyy-MM-dd格式的字符串转换成浏览器能正确识别的Date对象，核心要注意Date构造函数的月份参数是0-based（0代表1月，11代表12月），所以要把月份减1。

步骤1：添加日期解析函数

function parseYMD(dateStr) {
  // 先去除字符串前后空白，避免意外格式问题
  const trimmedStr = dateStr.trim();
  // 拆分成年、月、日三个部分
  const [year, month, day] = trimmedStr.split('-');
  // 月份减1后传入Date构造函数
  return new Date(year, month - 1, day);
}

步骤2：优化原Datepicker初始化代码

把原来直接用new Date()的部分替换成我们的解析函数，同时可以去掉重复初始化的冗余操作（每次focus都destroy再初始化没必要）：

$(document).on('focus', '.date', function(){ 
  const $dateInput = $(this);
  // 检查当前元素是否已初始化过Datepicker，避免重复操作
  if (!$dateInput.data('datepicker')) {
    const minDate = parseYMD($("#minDate").text());
    const maxDate = parseYMD($("#maxDate").text());
    $dateInput.datepicker({ 
      dateFormat: "dd.mm.yy", 
      minDate: minDate, 
      maxDate: maxDate 
    }); 
  }
});

验证效果 #

这样修改后，在IE11和Firefox 60.0.1里测试，切换到7月时就不会再跳回5月了——因为我们手动确保了minDate和maxDate都是有效的Date对象，Datepicker的范围逻辑能正常工作。

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