Bootstrap 5集成Tempus Dominus报错：$(...).datetimepicker不是函数

我已查阅Tempus Dominus脚本文档并尝试在示例页面中集成该脚本，但始终出现错误：Uncaught TypeError: $(...).datetimepicker is not a function。

以下是我的代码：

head中引入的资源： #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">

<!-- Popperjs -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha256-BRqBN7dYgABqtY9Hd4ynE+1slnEw+roEPFzQ7TRRfcg=" crossorigin="anonymous"></script>
<!-- Tempus Dominus JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.2.10/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>

<!-- Tempus Dominus Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.2.10/dist/css/tempus-dominus.min.css" crossorigin="anonymous">

body中的HTML结构： #

<div class="text-center">
    <div class="btn-group mx-auto" role="group">
        <button class="btn btn-primary btn-arrow-left" id="previous-day-btn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="col-xl-12 col-lg-7 text-center">
            <div class="form-group">
                <div class="input-group log-event" id="datetimepicker1" data-td-target-input="nearest" data-td-target-toggle="nearest">
                    <input id="datetimepicker1Input" type="text" class="form-control" data-td-target="#datetimepicker1" />
                    <span class="input-group-text" data-td-target="#datetimepicker1" data-td-toggle="datetimepicker">
                        <i class="fas fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <button class="btn btn-primary btn-arrow-right" id="next-day-btn">
            <i class="fas fa-arrow-right"></i>
        </button>
    </div>
</div>

页面底部的JS代码： #

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/sb-admin-2.min.js"></script>
<script>
    $(function() {
        $('#datetimepicker1').datetimepicker();
    });
</script>

我检查了控制台，所有JS文件均已正常加载（状态码200），请问是否有遗漏的配置或步骤？

1. 修正JS文件加载顺序 #

报错的核心原因是Tempus Dominus的JS在jQuery之前加载，导致它无法挂载到jQuery对象上，所以$(...).datetimepicker()方法不存在。

调整加载顺序：将jQuery的引入移到Tempus Dominus JS之前，建议把所有JS文件统一放在页面底部，确保依赖关系正确。修改后的资源引入顺序如下：

<!-- 页面底部的JS代码 -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha256-BRqBN7dYgABqtY9Hd4ynE+1slnEw+roEPFzQ7TRRfcg=" crossorigin="anonymous"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/sb-admin-2.min.js"></script>
<!-- Tempus Dominus JavaScript 必须在jQuery之后加载 -->
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.2.10/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>
<script>
    $(function() {
        $('#datetimepicker1').datetimepicker();
    });
</script>

同时，把head中的Tempus Dominus JS和PopperJS标签移除，避免重复加载。

2. （可选）使用原生JS初始化（无需jQuery） #

如果不想依赖jQuery，v6版本的Tempus Dominus支持原生JS初始化，替换页面底部的JS代码为：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        new TempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
    });
</script>

这种方式不需要调整jQuery的加载顺序，更轻量化。

3. 验证依赖完整性 #

确保你使用的Tempus Dominus版本与Bootstrap 5兼容（你用的v6.2.10是兼容Bootstrap 5的），同时CSS文件的引入位置可以保持在head中，不影响功能。

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