Django crudbuilder & Bootstrap 日期选择器

Question

Django==1.11.7
django-crudbuilder==0.2.5

使用Bootstrap datepicker。现在尝试将日期选择器以 crud 形式用于日期字段。

在普通的 Django 表单中，这可以工作：

self.fields['payment_date'].widget.attrs.update({'class': 'datepicker'})

但是如何在 crud 表单中为特定字段设置 class:datepicker？

documentation 似乎没有在 css 或 html 类中提及任何有用的内容。

Answer 1

从实现自定义模板开始。

将crudbuilder/templates/crudbuilder/instance/ 中的实例模板复制到您的应用程序模板目录中。

在所有复制的实例模板中替换包含的表单模板的模板位置。例如create.html

...

{% block main_content %}

<div class='container'>
    <h3>Create {{actual_model_name|title}}</h3>
    <hr/>
    {% include "my_app/widgets/form.html" %}
</div>

{% endblock %}

在my_app/templates/my_app/widgets/form.html 中，改为将 datepicker 类设置为 payment_date。 （原代码抄自django-cruid）

{% load crudbuilder %}
{% include "datepicker.html" %}

<form action="." method="post" enctype="multipart/form-data" class="form-horizontal" novalidate>
    {% csrf_token %}
    {% for field in form %}
        <fieldset class={% if field.errors %} "form-group has-error" {% else %} "form-group" {% endif %} >
            {{ field|label_with_class:"col-sm-2 control-label" }}
            <div class="col-xs-4">
                {% if field.name == 'payment_date' %}
                     {{ field|input_with_class:"form-control datepicker" }}
                {% endif %} 
                {{ field|input_with_class:"form-control" }}
                {{ field.errors }}
            </div>
        </fieldset>
    {% endfor %}
        <div class="form-group">
            <div  class="col-sm-offset-2 col-sm-12">
                <input type="submit" value="Save" class="btn btn-success" />
            </div>
        </div>
</form>

最后，将您的 crud 表单设置为 use your custom templates。

class PersonCrud(BaseCrudBuilder):
    ...
    custom_templates = {
        'list': 'my_app/list.html',
        'create': 'my_app/create.html',
        'detail': 'my_app/detail.html',
        'update': 'my_app/update.html',
        'delete': 'my_app/delete.html'
    }