使用django-bootstrap4-datetimepicker时出现$(...).datetimepicker不是函数错误

我来帮你排查这个常见的JS组件报错，这个问题大多和脚本加载顺序、重复引入、版本不匹配有关，咱们一步步拆解：

1. 先排查jQuery重复引入的问题 #

你的base.html很可能已经在页面底部或者其他区块引入过jQuery了，而你又在extra_head里重新加了一遍。重复加载jQuery会导致之前绑定在$对象上的datetimepicker方法被覆盖，自然就找不到这个函数了。

解决办法：

• 删掉你手动引入的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
• 检查base.html的结构，确认整个页面只加载一次jQuery，且加载顺序要在moment、bootstrap、datetimepicker之前。

2. 确认版本兼容性 #

你使用的是django-bootstrap4-datetimepicker组件，但手动引入的是Bootstrap 3.x版本的资源，这会直接导致版本冲突——这个组件是为Bootstrap 4设计的，和Bootstrap 3的DOM结构、JS逻辑不兼容。

解决办法：

• 替换Bootstrap资源为4.x版本（比如bootstrap@4.6.0）
• 确保bootstrap-datetimepicker的版本适配Bootstrap 4，避免混用跨版本的组件资源。

3. 利用组件自带的form.media管理依赖 #

django-bootstrap4-datetimepicker的{{ form.media }}会自动引入组件所需的所有依赖（jQuery、moment、bootstrap、datetimepicker的JS/CSS），你手动添加的资源和它重复了，反而会引发加载顺序或冲突问题。

修改后的extra_head可以简化成这样：

{% extends 'base.html' %} {% load static %} {% block extra_head %}
<link rel="stylesheet" href="{% static 'css/timeline.css' %}">
{{ form.media }}
{% endblock %}

4. 确保初始化脚本在依赖加载完成后执行 #

你的初始化代码虽然用了$(document).ready()，但如果脚本放在了依赖资源加载之前，依然会报错。建议把初始化脚本放在页面的底部（</body>标签前），或者放在base.html预留的extra_js区块里，确保所有依赖JS都加载完成后再执行初始化。

示例初始化脚本位置：

{% block content %}
<!-- 你的页面内容 -->
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function () {
    if (sessionStorage.scrollTop != "undefined") {
        $(window).scrollTop(sessionStorage.scrollTop);
    }
    $('#act_time').datetimepicker({
        format: 'MM/DD/YYYY HH:mm',
        maxDate: new Date(),
        minDate: new Date("{{ min_date.isoformat }}"),
    });
});
</script>
{% endblock %}

最后排查小技巧 #

如果还是不行，打开浏览器开发者工具（F12）：

• 切换到Network标签，刷新页面，检查所有JS/CSS资源是否成功加载（有没有404错误）
• 切换到Console标签，输入$.fn.datetimepicker，如果返回undefined，说明组件确实没有绑定到jQuery上，回到前面的步骤重新检查加载顺序和重复引入问题。

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