daterangepicker调用失败：TypeError: $(...).daterangepicker is not a function

这种问题我碰到过好多次，核心原因就是daterangepicker的依赖没正确加载或者加载顺序出了问题，结合你说的“相同代码在其他页面正常”的情况，咱们一步步排查解决：

1. 确认daterangepicker的完整依赖都已引入 #

你当前页面头部只列了Bootstrap和jQuery，但daterangepicker需要三个核心依赖，缺一不可：

• jQuery（必须是1.10+版本，你的1.12.4符合要求）
• Moment.js（处理日期的基础库，daterangepicker依赖它）
• daterangepicker自身的CSS和JS文件

正确的引入顺序应该是这样的（必须严格遵守顺序）：

<!-- 先加载jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- 然后加载Bootstrap JS（如果页面用到Bootstrap组件的话） -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 接着加载Moment.js -->
<script src="path/to/moment.min.js"></script>
<!-- 再加载daterangepicker的CSS -->
<link rel="stylesheet" href="path/to/daterangepicker.css">
<!-- 最后加载daterangepicker的JS -->
<script src="path/to/daterangepicker.js"></script>

2. 检查加载顺序是否颠倒 #

一定要保证jQuery → Moment.js → daterangepicker JS的顺序，要是把daterangepicker的JS放在jQuery前面，就会出现你遇到的错误——因为jQuery还没加载，daterangepicker没法挂载到$对象上。

3. 排查jQuery冲突问题 #

有些页面可能会引入多个jQuery版本，或者其他库占用了$符号，你可以在浏览器控制台做个简单测试：

• 输入$，看是否返回jQuery对象；
• 输入jQuery.fn.daterangepicker，如果返回undefined，说明daterangepicker确实没挂载成功；
• 如果确认有冲突，可以用jQuery.noConflict()解决，或者把初始化代码用自执行函数包裹：

  (function($) {
    $(document).ready(function() {
      $('.your-daterange-element').daterangepicker();
    });
  })(jQuery);
  

4. 检查是否重复引入jQuery #

有时候页面头部引入了jQuery，底部又不小心重复引入了一次，这会覆盖之前的jQuery对象，导致已经挂载的daterangepicker丢失。你可以打开浏览器的「网络」面板，搜索jQuery，看看有没有多个请求记录。

5. 确保DOM加载完成后再初始化 #

你的daterangepicker初始化代码一定要放在$(document).ready()里面，或者放在页面底部（</body>标签前），避免DOM还没渲染完成就执行初始化：

$(document).ready(function() {
  $('#your-datepicker-id').daterangepicker({
    // 这里写你的配置项，比如：
    startDate: moment().subtract(29, 'days'),
    endDate: moment()
  });
});

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