Integrate calendar widget in Django app

Question

How do I integrate a calendar widget in my system? I wish to add the calendar widget to my form, which has been designed in Django. I'm attaching a screenshot showing where I want to integrate it. Also, I want the calendar widget to be like http://www.dynarch.com/projects/calendar/.

What file do I need to modify and what code do I need to use?

enter image description here

check the link it may solve your issue **http://stackoverflow.com/questions/38601/using-django-time-date-widgets-in-custom-form** — JInx 123, Oct 08 '12 at 07:13

score 13 · Accepted Answer · edited May 23 '17 at 10:31

13

forms.py

import datetime
from django.forms.extras.widgets import SelectDateWidget
from django.forms import ModelForm, Form

date_field = forms.DateField(widget=SelectDateWidget)

or else there is also a another way using Javascript Using Django time/date widgets in custom form it may be helpful

edited May 23 '17 at 10:31

Community

1
1

answered Oct 08 '12 at 09:18

Malik Aqib

513
5
21

1

it always says 'DateField' object has no attribute 'needs_multipart_form'..what can i do to correct it? – madeeha ameer Apr 04 '13 at 05:52
`SelectDateWidget` is ideal. Why do none of the other umpteen threads about the same question mention it?? – underscore_d Jun 08 '17 at 20:04

score 9 · Answer 2 · edited Jun 08 '17 at 19:45

I figured it out. You just need to activate the admin interface in settings.py and import AdminDateWidget instead of SelectDateWidget in the forms.py file. Also, insert the following code into the template file of the form. Make sure to put it in between tags. here's the code:

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js">        </script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>

Hope its of use to somebody, cheers!

Saadat

score 5 · Answer 3 · answered Mar 03 '18 at 10:35

After a long struggle, I managed to get it working for Django 2.0.2. You need the following in the header of template:

<script type="text/javascript" src="/jsi18n/"></script>
<script type="text/javascript" src="{% static 'admin/js/core.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/js/admin/RelatedObjectLookups.js' %}"></script>

<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/base.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}"/>

urls.py

from django.views.i18n import JavaScriptCatalog


urlpatterns = [
    ...
    path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),

]

And then forms.py

from django import forms
from .models import MyModel
from django.contrib.admin.widgets import AdminDateWidget


class TripDetailForm(forms.ModelForm):
    class Meta:
        model = MyModel
        fields = '__all__'
        widgets = {
            'my_field': AdminDateWidget(),
}

With this code, you must be good to go.

This did not work for me but I'm not getting any errors. The form is widget for my date field is still a text box. I'm rendering with {{ form.as_p }} — Mark Chackerian, Jun 02 '18 at 15:17
@MarkChackerian those lines can be replace with this tag {{form.media}}, which is much more shorter — Dat TT, Jun 24 '20 at 15:40
Just a heads up you don't need this lines. This will just mess up your forms. ` ` — sage poudel, Aug 28 '20 at 08:23

score 0 · Answer 4 · answered Oct 16 '18 at 20:23

Just a tip for people who are using Django_filters and they want the admin calendar to show on there date fields (E.x Date is greater than) .. You need to declare the widget in the filter you created .

Like this :

class InterviewFilter(django_filters.FilterSet):

    start_date = django_filters.DateFilter(name='date',lookup_expr=('gt'), widget=AdminDateWidget())
    end_date = django_filters.DateFilter(name='date',lookup_expr=('lt'), widget=AdminDateWidget()) 
    registry_year = django_filters.DateRangeFilter(field_name='date', lookup_expr='year')

    class Meta:
        model = Interview
        fields = ['position', 'result', 'status']

Integrate calendar widget in Django app

4 Answers4

Linked