Django calendar widget in a custom form

Question

I am trying to add a calendar date input to one of my forms. There is a wonderful calendar widget that Django uses on its admin pages, but I can\'t figure out how to add it to a

Answer 1

All widgets used by django-admin are in the django/contrib/admin/widgets.py file. Just use that as a usual widget in a form. What you want is AdminDateWidget.

from django.contrib.admin.widgets import AdminDateWidget
from django.forms.fields import DateField

class MyForm(Form):
    my_field = DateField(widget=AdminDateWidget)

That will create a date-picker with calendar. You may try to customize it to what you need by extending it or create a new widget from a scratch with an inspiration from AdminDateWidget.

Answer 2

Instead of the Admin widget, consider using the normal "SelectDateWidget" built into Django: https://docs.djangoproject.com/en/stable/ref/forms/widgets/#selectdatewidget

Answer 3

You can do this by form widget " SelectDateWidget()" like this example:

class MyForm(forms.Form):

        start_date=forms.DateField(widget = forms.SelectDateWidget())
        end_date=forms.DateField(widget = forms.SelectDateWidget())

Answer 4

I figured it out, thanks to Dave S. and a number of old posts on this topic. My successful method:

Create a custom form.

At the top, import the admin widgets using from django.contrib.admin.widgets import AdminDateWidget. Then, add the different fields of your form, using my_field = DateField(widget = AdminDateWidget) whenever you want to use the date widget.

Create your form template

Place the following toward the top to include the appropriate css/js files:

{% load i18n admin_modify adminmedia %}
{% block extrahead %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% admin_media_prefix %}css/base.css" />
<link rel="stylesheet" type="text/css" href="{% admin_media_prefix %}css/widgets.css" />
<script type="text/javascript" src="/jsi18n/"></script>
<script type="text/javascript" src="{% admin_media_prefix %}js/core.js"></script>
{{ form.media }}
{% endblock %}

Note: You do not necessarily need all of this, depending upon your version of Django and how you are implementing the form fields. this is what I found that I needed to use the widgets.

Now just output your form like normal, and the JS should automatically convert it to a date field. Enjoy!

Answer 5

This is basically a duplicate of Using Django time/date widgets in custom form.

The answer has been given by @Dave S and @MrGlass, but for Django 1.2 and later this will additionally also be needed to help the JavaScript find the admin media:

{% load adminmedia %} /* At the top of the template. */

/* In the head section of the template. */
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
</script>

(from Carl Meyer's answer)