jquery - 表单的 Django 小部件被忽略了吗？ (datefield 和 modelchoice 上的 datepicker 和 tabindex)

Question

我正在尝试构建一个漂亮的表单，并为它找到了一些很酷的 CSS，表单看起来不错，但有几个字段(大部分来自选择字段，因为模型有外键)和另一个是来自日期字段的内容完全被忽略了。我在堆栈溢出并使用了我认为正确的小部件，而且我的代码似乎无法正常工作，而且我在开发人员控制台中没有看到任何错误。表格:

from django import forms
from .models import Group

class GroupForm(forms.ModelForm):
    notes=forms.CharField(widget = forms.Textarea)
    billing_address = forms.ModelChoiceField(queryset = '', widget=forms.Select(attrs={'tabindex':'5'}))
    start_date = forms.DateField(widget=forms.TextInput(attrs=
                                {
                                    'class':'datepicker',
                                    'tabindex' : '6',
                                    'placeholder' : 'Groups start date'
                                }))

    class Meta:
        model=Group
        exclude = ['created_at', 'updated_at']

在我的模板 View 中，我有这个:

<div class="col-2">
    {{ form.billing_address.errors }}
    <!-- {{ form.notes.label }}
    {{ form.notes }} -->
    <label>
    Billing Address
        {{ form.billing_address }}
    </label>
    </div>
    <div class="col-2">
     {{ form.mailing_address.errors }}
    <!-- {{ form.notes.label }}
    {{ form.notes }} -->
    <label>
    Mailing Address
        {{ form.mailing_address }}
    </label>
  </div>
  <div class="col-4">
    <label>
      Start Date
     {{ form.start_date }}      
    </label>
  </div>

当然这个模板有一个 base.html 链接到我认为所有正确的 css 和 js 文件:

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<link href="{% static 'ipaswdb/css/styles.css' %}" type="text/css" media="all" rel="stylesheet">
<link href="{% static 'ipaswdb/css/switchery.min.css' %}" type="text/css" media="all" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

  <script type="text/javascript" src="{% static 'ipaswdb/js/switchery.min.js' %}"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 <script type="text/javascript" src="{% static 'ipaswdb/js/bootstrap.min.js' %}"></script>

这是行不通的，渲染的源代码在这里:

   <label>
    Billing Address
        <select id="id_billing_address" name="billing_address">
<option value="" selected="selected">---------</option>
<option value="1">Las Cruces</option>
<option value="2">Albuquerque</option>
</select>
    </label>
    </div>
    <div class="col-2">

    <!-- Notes
    <textarea cols="40" id="id_notes" maxlength="255" name="notes" rows="10">
</textarea> -->
    <label>
    Mailing Address
        <select id="id_mailing_address" name="mailing_address">
<option value="" selected="selected">---------</option>
<option value="1">Las Cruces</option>
<option value="2">Albuquerque</option>
</select>
    </label>
  </div>
  <div class="col-4">
    <label>
      Start Date
     <input id="id_start_date" name="start_date" type="text" />     
    </label>
  </div>

我也添加了我的 views.py，因为我认为我在太多博客上使用了一种做事方式，正在编辑另一种做事方式，而我的第一种做表格的方式完全忽略了这种做事方式.

class GroupCreateView(CreateView):
    model = Group

    fields = '__all__'
    exclude = ['created_at', 'updated_at']
    template_name = 'ipaswdb/group/group_form.html'

还有我的 urls.py

from django.conf.urls import url

from . import views
from ipaswdb.views import GroupCreateView

app_name = 'ipaswdb'
urlpatterns = [
    url(r'group/$', views.group_list, name='group_list'),
     url(r'group/(?P<group_id>[0-9]+)/$', views.group_detail, name='group_detail'),
    url(r'group/add/$', GroupCreateView.as_view(), name='group-add'), 

]

不确定我错过了什么，我以为我做的一切都是对的？
编辑:Datepicker 通常也不起作用，因为我没有在 jquery 之后加载 jquery-ui js 文件，而且我没有用于查找类并向其添加 datepicker 的 javascript。在表单修复答案后修复了该问题。

Answer 1

您需要更新您的 View 以使用表单:

from .forms import GroupForm

class GroupCreateView(CreateView):
    model = Group
    form_class = GroupForm
    ...

由于您排除了表单中的字段，您可以从 View 中删除 exclude。