jQuery UI Date Picker在IE 11中无法正常工作的问题

我之前也踩过jQuery UI Date Picker在IE11里失效的坑，尤其是你这种基础示例能跑、集成到现有代码就挂的情况，大概率是兼容性细节或者代码冲突的问题，咱们一步步来排查解决：

1. 确认资源加载的正确性 #

你用的jQuery 1.12.4和UI 1.12.1版本组合本身是兼容IE11的，但要注意两个关键点：

• 必须先加载jQuery，再加载jQuery UI，顺序反了肯定会出问题；
• IE11对协议相对URL（比如//code.jquery.com/...）的处理偶尔会有异常，建议把CSS和JS的链接改成完整的HTTPS地址：

  echo '<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">';
  echo '<script src="https://code.jquery.com/jquery-1.12.4.js"></script>';
  echo '<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>';
  

另外还要检查页面有没有重复加载不同版本的jQuery，多个版本共存很容易引发冲突。

2. 查看IE11控制台的错误信息 #

打开IE11的开发者工具（按F12），切换到「控制台」标签，看看有没有报错——这是定位问题最快的方式：

• 如果是语法错误，大概率是你的代码里用了IE11不支持的ES6+语法（比如箭头函数、let/const、模板字符串），需要把代码转成ES5兼容的写法，或者引入Babel polyfill来补全兼容性；
• 如果是DOM元素找不到的错误，那就是初始化代码执行的时候目标元素还没加载完成。

3. 调整Date Picker的初始化逻辑 #

确保初始化代码在DOM完全加载后执行，IE11对$(document).ready()的处理有时候和现代浏览器有差异，推荐用最稳妥的写法，或者把脚本放在</body>标签前（页面最后）：

// 兼容IE11的初始化写法
$(document).ready(function() {
  $("#你的日期输入框ID").datepicker();
});

另外，初始化时尽量用简单的选择器（比如ID选择器），IE11对复杂CSS选择器的支持不如现代浏览器。

4. 排查现有代码的冲突 #

基础示例能跑但集成后不行，十有八九是现有代码和jQuery UI冲突了：

• 检查页面有没有引入其他JS库（比如Prototype、MooTools），这些库可能会和jQuery的$符号冲突，解决方法是用jQuery.noConflict()：

  jQuery.noConflict();
  jQuery(document).ready(function($) {
    // 这里可以正常使用$
    $("#你的日期输入框ID").datepicker();
  });
  

• 检查现有CSS是否覆盖了jQuery UI的样式，比如z-index设置过低导致日期选择器弹窗被其他元素盖住，或者样式被重置导致弹窗显示异常。

5. 强制IE11使用最新文档模式 #

有时候IE11会自动切换到旧的兼容模式，导致组件失效。你可以在HTML头部添加标签强制IE使用最新模式：

echo '<meta http-equiv="X-UA-Compatible" content="IE=edge">';

同时确保页面开头有正确的DOCTYPE声明：

echo '<!DOCTYPE html>';

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