无法通过 django CreateView 和 ModelForm 使用 DateTime 输入

Question

我尝试使用 CreateView 通过 UI 创建模型事件的对象 我的模型是

class Event(models.Model):
    start = models.DateTimeField(_("start"), db_index=True)
    end = models.DateTimeField(_("end"), db_index=True, help_text=_("The end time must be later than the start time."))
    title = models.CharField(_("title"), max_length=255)
    description = models.TextField(_("description"), blank=True)
    rule = models.ForeignKey(Rule)
    calendar = models.ForeignKey(Calendar)

我的模型表单是

class EventForm(forms.ModelForm):
    class Meta:
        model=Event
        fields=['start','end','title','description','rule','calendar',]

我的网址是

url(r'^addEvent/$', CreateEventView.as_view(), name='add-event'),

查看是

class CreateEventView(CreateView):
    form_class=EventForm
    template_name="createEventForm.html"
    success_url='/eventListView/'

我尝试在以下 HTML 模板中自动呈现此内容

{% extends "base.html" %}
{% load i18n %}
{% block body %}
    <form method='POST'>{% csrf_token %}
        {{form.as_p}}
    <button type="submit">Save</button>
    </form>
    <h2></h2>
    {% if error %}
    <p>Error {{error}}</p>
    {% endif %}
{% endblock %}

其他组件渲染良好，包括作为下拉列表的外键。我仅面临日期时间字段开始和结束的问题，这些字段呈现为文本字段。

我尝试了很多解决方案，包括在删除日期时间字段后将 init 函数添加到我的表单中

def __init__(self, *args, **kwargs):
    super(EventForm, self).__init__(*args, **kwargs)
    self.fields['start']=forms.DateTimeField(widget=forms.widgets.DateTimeInput())

但它们仍然呈现为文本字段。我使用了网上建议的另一种方法并添加了

<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>-->
<script>
    $(function () {
        $('.datetime-input').datetimepicker({
            format:'YYYY-MM-DD HH:mm'
        });
    });
</script>

到我的基本模板并修改表单对象以包含小部件

class EventForm(forms.ModelForm):
    class Meta:
        model=Event
        fields=['start','end','title','description','rule','calendar',]
        widgets = {
            'start': forms.widgets.DateTimeInput(attrs={'class':'datetime-input'}),
        }

尽管“开始”字段正在识别 bootstrap-datepicker 中的 datepicker 函数的格式，但它仍然将其呈现为文本字段。我在浏览器控制台上收到以下错误：

Uncaught Error: datetimepicker component should be placed within a relative positioned container

请告诉我是否有办法让日期时间小部件显示在用户界面上。谢谢。如果您发现我的方法很业余，我很抱歉。