Rails 4集成Bootstrap-datepicker报错：Uncaught TypeError: $(...).datepicker不是函数

我之前也踩过这个坑，大概率是脚本加载顺序紊乱或者自定义日期格式的代码写法/位置不对导致的，咱们一步步排查解决：

1. 优先检查 application.js 的加载顺序 #

Bootstrap-datepicker 完全依赖 jQuery 和 Bootstrap（如果你的项目用了 Bootstrap 框架），必须保证它们的加载顺序正确：

//= require jquery
//= require jquery_ujs
//= require bootstrap  // 若项目依赖 Bootstrap，一定要放在 datepicker 之前
//= require bootstrap-datepicker
//= require_tree .

注意：require_tree . 会自动加载 app/assets/javascripts 下的所有文件，如果你的自定义日期格式代码在单独的 JS 文件里，要确保它在 bootstrap-datepicker 之后加载，否则会因为找不到 datepicker 方法报错。

2. 修正自定义日期格式的代码写法 #

你说之前功能正常，改格式后出问题，很大概率是自定义代码的写法不符合 Rails 4 的 Turbolinks 特性（Rails 4 默认开启 Turbolinks）。正确的初始化写法应该是：

// 用 turbolinks:load 替代传统的 $(document).ready，适配页面无刷新跳转
$(document).on('turbolinks:load', function() {
  // 匹配你表单里的 data-provide 属性
  $('[data-provide="datepicker"]').datepicker({
    format: 'yyyy-mm-dd'  // 替换成你需要的格式，比如 'dd/mm/yyyy'
  });
});

如果之前你直接写了 $('.datepicker').datepicker(...) 但没放在 Turbolinks 回调里，页面切换时会因为 DOM 未重新初始化而报错。另外也可以给输入框加个 class 方便选择：

<div class="form-group"> 
  <%= f.label :start_date %><br> 
  <%= f.text_field :start_date, class: 'datepicker', data:{ provide:'datepicker' } %> 
</div>

然后在 JS 里用 $('.datepicker') 选择元素，效果是一样的。

3. 确认 application.css 的加载顺序 #

虽然 CSS 顺序不会直接导致 JS 错误，但如果样式加载异常也可能间接影响组件运行，确保顺序正确：

*= require bootstrap
*= require bootstrap-datepicker3
*= require_tree .
*= require_self

4. 清除资产缓存并重启服务器 #

Rails 的资产缓存经常会导致旧代码没有更新，执行以下命令后重启服务器：

rake assets:clean

5. 检查浏览器控制台的其他报错 #

除了 datepicker is not a function，看看有没有其他前置错误，比如 jQuery 未加载、Bootstrap JS 报错等——这些都会导致 datepicker 无法正常初始化。

内容的提问来源于stack exchange，提问作者Tadej Firšt