javascript - Django 日期字段 JavaScript

Question

我正在尝试添加 dropdown datepicker到我的 Django 项目中的日期字段。这就是我的设置方式

在forms.py中 -

self.fields['start_date'] = forms.DateField(
                widget=forms.DateInput(attrs={'class': 'form-control'})
            )

在我的基本模板 base.html 中，我导入了相关文件 -

在顶部:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.css"
        rel="stylesheet">

在底部我有

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.js"></script>

<script src="{% static "js/icheck/icheck.min.js" %}"></script>

<script src="{% static "js/custom.js" %}"></script>

<!-- pace -->
<script src="{% static "js/pace/pace.min.js" %}"></script>
{% block scripting %}{% endblock %}
</body>

</html>

在生成表单的模板中:

<div class="col-md-6 col-sm-6 col-xs-12">
    <div class='input-group date'>
        {{ form.start_date }}
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</div>

在模板的底部我有:

    {% block scripting %}
        <script type=application/javascript>
           #tooltip function which works great
        </script>

        <script type=application/javascript>
            $('.input-group.date').datepicker({
            });
        </script>
    {% endblock %}

这会生成我想要的字段 - 。但是下拉不起作用。我似乎不明白为什么。我尝试了 codepen并且它工作完美。有人可以帮我找出问题所在吗？

Answer 1

确保自定义脚本 block :

{% block scripting %}
{% endblock %}

位于 base.html 的最后。这样，jQuery 和其他内容将被加载，然后您的自定义脚本