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

时间:2018-04-19 09:45:37

标签: django-forms django-templates bootstrap-datetimepicker django-generic-views jquery-widgets

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

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)

我的ModelForm是

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 %}

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

我尝试了很多解决方案,包括在删除datetime字段后将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'}),
        }

即使'start'字段是从bootstrap-datepicker识别datepicker函数的格式,它仍然将它呈现为文本字段。 我在浏览器控制台上收到以下错误:

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

如果有办法让UI上显示datetime-widget,请告诉我。谢谢。对不起,如果你发现我的方法业余。

0 个答案:

没有答案