Laravel 7中Bootstrap Datepicker报错：$(...).datepicker不是函数

这个问题我之前也踩过坑，核心原因其实是重复加载jQuery+脚本执行顺序不对，还有个容易忽略的小细节——组件初始化方法搞错了，咱们一步步来搞定：

1. 先删掉重复的jQuery引入 #

Laravel默认的app.js已经内置了jQuery（毕竟Bootstrap依赖它），你在视图里又额外引入了一次<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>，这会导致两个版本的jQuery冲突：后加载的会覆盖前一个，而datepicker是绑定到被覆盖的那个jQuery实例上的，自然就找不到方法了。

所以第一步，把视图里这行重复的jQuery引入直接删掉。

2. 调整脚本加载顺序，处理defer的影响 #

你的app.js加了defer属性，意味着它会等整个DOM解析完成后才执行。但你原来的内联脚本是直接写在视图里的，会比app.js先跑，这时候jQuery还没加载，肯定会报错。

有两种解决思路：

方法一：把依赖脚本移到布局底部 #

修改你的布局文件，把datepicker的CSS留在头部，然后把moment和datetimepicker的脚本放到</body>标签前，并且放在app.js之后：

修改后的布局关键部分：

<head>
    <!-- 原有头部内容不变 -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <!-- datepicker的CSS保留在头部 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet">
</head>
<body>
    <!-- 页面内容区域 -->

    <!-- 把脚本移到body底部，保证加载顺序 -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</body>

方法二：用DOM加载事件包裹初始化代码 #

如果不想动布局结构，就在你的内联脚本外面套一层DOM加载完成的监听，确保jQuery和datepicker脚本都加载完毕再执行初始化：

document.addEventListener('DOMContentLoaded', function() {
    $('#datepicker').datetimepicker({
        format: 'MM/DD/YYYY' // 注意格式要匹配bootstrap-datetimepicker的规则
    });
});

3. 修正组件初始化方法的小错误 #

你用的是bootstrap-datetimepicker，它的初始化方法是datetimepicker()，而不是jQuery UI的datepicker()！这是很容易混淆的点，把$( "#datepicker" ).datepicker({...})改成$( "#datepicker" ).datetimepicker({...})就对了。

最终修改后的视图文件 #

@extends('layouts.app')
@section('content')
<form action="/tour/{id}" method="post">
    <!-- CROSS Site Request Forgery Protection -->
    @csrf
    <div class="form-group">
        <label>Date</label><br>
        <input id="datepicker" type="text" />
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    $('#datepicker').datetimepicker({
        format: 'MM/DD/YYYY'
    });
});
</script>
@endsection

按照上面的步骤改完，应该就能正常加载datepicker了。如果还有问题，可以打开浏览器开发者工具（F12），在控制台输入jQuery看看能不能正常输出，再检查bootstrap-datetimepicker是否加载成功。

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