Django crudbuilder & Bootstrap 日期选择器

Posted 2023-05-07

【中文标题】Django crudbuilder & Bootstrap 日期选择器

【英文标题】：Django crudbuilder & Bootstrap datepicker

【发布时间】：2018-06-22 07:35:53

【问题描述】：

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 类中提及任何有用的内容。

【参考方案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'
    

【讨论】：

显然，% include "datepicker.html" % 也需要添加到模板（或基本模板）中。添加后，上述解决方案可以正常工作。谢谢！

@Davy 感谢您指出这一点。如果您编辑此答案并包含此信息，我会批准您的编辑。