Python 将Bootstrap 3 Datepicker v4与crispy forms集成

我正在尝试使用Bootstrap3DatePickerV4（）。 使用bootstrap3/django1.9/crispy-forms

我找到了django-bootstrap3-datetimepicker（）

因为我收到的反馈并没有显示研究结果，我已经阅读了上面网站上的所有文档，我不知道为什么datepicker没有出现。除了查看呈现的HTML、呈现的源HTML和Firefox中的各种检查之外，我不确定如何进一步调试（但我不知道我可能做错了）

我只是真的不知道如何在简单的表单中使用它——非常感谢您的指导，我是django的新手，但我的python是“ok”的。 我不确定是否最好： （1） 在通过a字段（）附加的crispy模板中直接使用java （2） 以某种方式从ModelForm中的第二个链接/包附加小部件

AccordionGroup('Other Information','referrer',
                       Field('first_contact_date', template='customers/datepicker_field.html'),
                                  'do_not_contact')

我的布局是以模型形式设置的。 表单通过基于类的视图呈现

我一直在尝试选项（1）

从模型形式

AccordionGroup('Other Information','referrer',
                       Field('first_contact_date', template='customers/datepicker_field.html'),
                                  'do_not_contact')

然后该模板如下所示：

{% load crispy_forms_field %}

<div id="div_{{ field.auto_id }}" class="control-group{% if form_show_errors and field.errors %} error{% endif %} {% if field.field.widget.attrs.class %} {{ field.field.widget.attrs.class }}{% endif %}">

    {% if field.label %}
        <label for="{{ field.id_for_label }}" class="control-label {% if field.field.required %}requiredField{% endif %}">
            {{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
        </label>
    {% endif %}

    <div class="controls">
        <div class="input-append">
            {% crispy_field field %}
            <span class="add-on {% if active %}active{% endif %}">{{ crispy_appended_text|safe }}</span>
        </div>
        <script type="text/javascript">
            $(function () {
                $('{{ field.id_for_label }}').datetimepicker();
            });
        </script>

        {% include 'bootstrap/layout/help_text_and_errors.html' %}
    </div>
</div>

{%load crispy_forms_field%}
{%if field.label%}
{field.label | safe}{%if-field.field.required%}*{%endif%}
{%endif%}
{%crispy_field%}
{{crispy_追加_text|safe}}
$（函数（）{
$（{field.id_for_label}}'）.datetimepicker（）；
});
{%include'bootstrap/layout/help_text_和_errors.html%}

我在相关表单中包含了所有不同的js和css，并且看起来效果不错，例如

<div id="div_id_first_contact_date" class="control-group "> <label for="id_first_contact_date" class="control-label requiredField">
            First Contact Date<span class="asteriskField">*</span> </label> <div class="controls"> <div class="input-append"> <input class="dateinput form-control" id="id_first_contact_date" name="first_contact_date" type="text" value="23/02/2016" /> <input id="initial-id_first_contact_date" name="initial-first_contact_date" type="hidden" value="2016-02-23" /> <span class="add-on "></span> </div> <script type="text/javascript">
            $(function () {
                $('id_first_contact_date').datetimepicker();
            });
        </script> </div>
</div>

首次接触日期*
$（函数（）{
$（'id\u first\u contact\u date'）。datetimepicker（）；
});

但是不起作用。。。虽然表单字段仍然可以正常工作。。。没有选择者

---

所有的建议（包括我错过的任何自述）都感激地接受了：）

如果有人路过，我已经发现了我的错误

$（{field.id_for_label}}'）.datetimepicker（）

应该是

---

$（'{{field.id_for_label}}'）.datetimepicker（）

您还应该在表单模板的头部导入jQuery和Bootstrap JS（由于某些原因，如果在表单继承的模板中导入了它们，则不会出现datepicker，例如，您的base.html）