Bootstrap3 datetimepicker报错：$(...).datetimepicker is not a function

这个报错我之前踩过好几次坑，本质就是浏览器找不到datetimepicker这个方法，大概率是依赖没配对或者加载顺序出问题了，结合你的情况，给你几个排查和解决的步骤：

1. 确认依赖文件完整且版本匹配 #

Eonasdan的Bootstrap3 datetimepicker有几个必须的依赖，一个都不能少：

• jQuery（得是和Bootstrap3兼容的版本，比如1.x或2.x系列，别用和Bootstrap3不兼容的高版本jQuery）
• Moment.js（这是datetimepicker处理日期时间的核心依赖，很多人容易漏掉它）
• Bootstrap3的CSS和JS文件
• datetimepicker自身的CSS和JS文件（要选对应Bootstrap3的版本，别误下成Bootstrap4适配的版本）

2. 严格按照正确顺序加载文件 #

加载顺序错了绝对会出问题，正确的加载顺序必须是：

• 先加载jQuery
• 然后加载Moment.js
• 接着加载Bootstrap3的CSS → datetimepicker的CSS
• 再加载Bootstrap3的JS
• 最后加载datetimepicker的JS

举个标准的引入示例：

<!-- jQuery -->
<script src="jquery.min.js"></script>
<!-- Moment.js -->
<script src="moment.min.js"></script>
<!-- Bootstrap3 CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Datetimepicker CSS -->
<link rel="stylesheet" href="bootstrap-datetimepicker.min.css">
<!-- Bootstrap3 JS -->
<script src="bootstrap.min.js"></script>
<!-- Datetimepicker JS -->
<script src="bootstrap-datetimepicker.min.js"></script>

3. 确保初始化代码在DOM加载完成后执行 #

你的初始化代码一定要放在$(document).ready()回调里，或者直接写在页面最底部（目标DOM元素之后），不然浏览器还没渲染出目标元素，也可能间接导致这个报错：

$(document).ready(function() {
    $('#datetimepicker1').datetimepicker();
});

4. 排查你代码里的核心问题 #

看你更新后的代码，大概率是依赖加载顺序不对或者漏了Moment.js。比如如果把datetimepicker的JS放在jQuery之前，浏览器还没加载jQuery，自然找不到$对象，更别说datetimepicker方法了；如果没引入Moment.js，datetimepicker内部依赖它的日期处理能力，也会报错找不到自身的函数。

按照上面的步骤调整后，应该就能正常运行了。

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