django admin datetime widget (calendar) in a custom form

Question

I cannot add an admin calendar widget in my form. How to do it?

model.py

from django.db import models
from django.contrib.auth.models import User


FIELDNUM = (('1', '1'), ('2', '2'), ('3', '3'),
            ('4', '4'), ('5', '5'), ('6', '6'), ('7', '7'), ('8', '8'),
            ('9', '9'), ('10', '10'))

FIELDNAMES = (('test', 'test'), ('kostas', 'kostas'), ('kaka', 'kaka'))

class Reservation(models.Model):
    field_name = models.CharField("Field Name*", choices=FIELDNAMES, max_length=100)
    fieldnum = models.CharField("Field Number*", choices=FIELDNUM, max_length=2)
    date = models.DateField("Date*")
    time = models.TimeField("Time*")
    user = models.ForeignKey(User)
    date_time = models.DateTimeField(auto_now_add=True, blank=True, unique=False)

    def __unicode__(self):
        return '%s, %s, %s, %s' % (self.field_name, self.date, self.time, self.date_time)

    class Meta:
        unique_together = ("field_name", "fieldnum", "date", "time")

form.py

from django import forms
from booking.models import Reservation

class ReservationForm(forms.ModelForm):
    class Meta:
        model = Reservation
        exclude = ['user']

I rendered my form as paragraph in my template.

Where to call the widget and how to set it in my template in order for it to work?

possible [duplicate](http://stackoverflow.com/questions/38601/using-django-time-date-widgets-in-custom-form) — Alex Lisovoy, Oct 18 '14 at 18:49

score 0 · Answer 1 · answered Oct 18 '14 at 22:10

I think the easiest way is not to use the widget from django.contrib.admin.widgets but rather a third party widget such as the Datepicker from jQuery UI.

All you have to do is to include jQuery UI in your template and add this script

<script>
  $(function() {
    $( ".date_picker" ).datepicker();
  });
</script>

Where .date_picker is the name of the class of the form input related to the date field of your Reservation model.

In order for Django to add this class='date_picker' to the generated form input related to date, you have to slightly modify your ModelForm. More specifically,

from django import forms
from booking.models import Reservation

class ReservationForm(forms.ModelForm):
    class Meta:
        model = Reservation
        exclude = ['user']
        widgets = {
            'date' : forms.DateInput(attrs={'class' : 'date_picker'})
        }

This will have the effect of rendering <input type='text' ... class='date_picker' /> when you call {{ form.as_p }} in your template, and jQuery UI does the rest.

By the way, a small improvement to your models.py would be to use python's list comprehension. Namely

FIELDNUM = (('1', '1'), ('2', '2'), ('3', '3'),
        ('4', '4'), ('5', '5'), ('6', '6'), ('7', '7'), ('8', '8'),
        ('9', '9'), ('10', '10'))

is equivalent to

FIELDNUM = [(str(i), str(i)) for i in range(1,11)]

sorry but i didn't get it. can you please explain how to use this in my template when i render my form like that 'code'
{% csrf_token %} {{ form.as_p }} — kostas1987, Oct 19 '14 at 20:33
sorry but i didn't get it. can you please explain how to use this in my template when i render my form like that
{% csrf_token %} {{ form.as_p }} — kostas1987, Oct 19 '14 at 20:46
i did what you suggested but i dont get the datepicker in my form — kostas1987, Oct 20 '14 at 15:51

django admin datetime widget (calendar) in a custom form

1 Answers1