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?

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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