使用Bootstrap的网页集成jQuery UI Datepicker遇Uncaught TypeError错误求助

嘿，我帮你搞定这个报错！你遇到的Uncaught TypeError大概率是因为用了jQuery Slim版本导致的——这是很多人踩过的坑。

核心原因 #

你加载的jquery-3.2.1.slim.min.js是jQuery的精简版，它砍掉了不少核心功能（比如$.widget、动画效果模块），而jQuery UI Datepicker完全依赖这些被砍掉的基础方法，所以直接用slim版本会触发类型错误。

具体解决步骤 #

• 替换为完整版本的jQuery
  把slim版的jQuery换成同版本的完整包，比如jquery-3.2.1.min.js（注意文件名里没有slim）。

• 调整JS加载顺序
  确保文件加载顺序严格遵循依赖关系，正确顺序应该是：

  1. 完整jQuery文件
  2. jQuery UI文件
  3. Popper.js
  4. Bootstrap JS文件
     举个正确的加载示例：

  <script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="/static/js/popper.min.js"></script>
  <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
  

• 确认Datepicker初始化时机
  确保你的Datepicker初始化代码是在所有依赖加载完成后执行的，比如放在$(document).ready()里：

  $(document).ready(function() {
    // 替换成你的输入框ID
    $("#datepicker").datepicker();
  });
  

• 检查jQuery UI自定义包完整性
  回忆下你下载jQuery UI时的自定义配置，确认已经勾选了Datepicker组件，以及它关联的依赖模块（比如Core、Widget、Mouse，官网自定义下载时会自动勾选依赖，但最好再核对一遍）。

额外排查点 #

如果按上面的步骤操作后还是报错，打开浏览器开发者工具（F12），查看控制台的具体错误信息：

• 是不是显示$.datepicker is not a function？那可能是jQuery UI没加载成功，检查文件路径是否正确，有没有404错误。
• 如果是其他类型错误，把具体错误信息贴出来，能更快定位问题~

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