Django加载bootstrap-datepicker报错：$(...).datepicker不是函数

Hey there, let's work through why you're hitting this error—it's a common issue with script loading order, and easy to fix!

The Root Cause #

The bootstrap-datepicker.js plugin relies entirely on jQuery and Bootstrap JS to function. Right now, you're loading the datepicker script before both of these dependencies. When the datepicker code runs, it can't find the $ (jQuery) object it needs to attach the datepicker method to, hence the "not a function" error.

The Fix: Reorder Your Scripts #

You need to load your assets in this strict sequence to ensure dependencies are available when needed:

1. jQuery
2. Bootstrap JS
3. Bootstrap Datepicker JS
4. Your custom initialization code

Here's the corrected template code:

{% load staticfiles %} 
<script type="text/javascript" src="{% static "Leaflet_modi.js" %}"></script> 
<!-- Files for date time picker----------------------> 
<link rel="stylesheet" href="{% static 'date_picker/css/datepicker.css' %}" type = "text/css"/> 

<!-- 1. Load jQuery first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<!-- 2. Then Bootstrap JS -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<!-- 3. Then the datepicker plugin -->
<script type="text/javascript" src="{% static "date_picker/js/bootstrap-datepicker.js" %}"></script> 

<!-- 4. Finally your initialization code -->
<script type="text/javascript"> 
$(document).ready(function () { $('#Start_Date').datepicker({ format: "dd/mm/yyyy" }); }); 
$(document).ready(function () { $('#End_Date').datepicker({ format: "dd/mm/yyyy" }); }); 
</script>

Quick Extra Checks (Just to Be Thorough) #

• Double-confirm that bootstrap-datepicker.js is actually in your AEB/static/date_picker/js/ directory (since you're not getting a 404, this is likely fine, but it never hurts to verify)
• Ensure you aren't loading jQuery a second time elsewhere in your template—duplicate jQuery loads can break plugin attachments
• Make sure your #Start_Date and #End_Date input elements exist in the DOM (your $(document).ready() wrapper already handles this, but it's good to confirm their IDs match exactly)

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