Unable to use DateTime input through django CreateView and ModelForm

Question

I tried to create an object of Model Event through UI using CreateView My Model is

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)

My ModelForm is

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

My url is

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

View is

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

I have tried to automatically render this in the following HTML template

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

The other components are rendering well, including foreign-key as dropdown. I am facing a problem only with the date-time fields start and end, which are rendering as text-fields.

I tried many solutions, including adding init function to my form after removing the datetime fields

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

But they are still rendering as text-fields. I used another method suggested online and added

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

To my base template and modified the form object to include widgets

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

Even though the 'start' field is recognising the format on the datepicker function from bootstrap-datepicker, it is still rendering it as a text field. I got the following error on the browser console:

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

Please let me know if there is a way to get the datetime-widget to display on the UI. Thank you. Sorry if you found my approach amateurish.

Unable to use DateTime input through django CreateView and ModelForm

0 Answers0