我尝试使用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,请告诉我。谢谢。对不起,如果你发现我的方法业余。