[Django]-Django calendar widget in a custom form

by

10👍

✅

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!

👤MrGlass

28👍

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

👤rogueleaderr

12👍

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.

👤davekr

5👍

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())
👤Projesh Bhoumik

1👍

use django form widget called NumberInput as the widget for any datefield or datetimefield in Django This will render the basic HTML NumberInput field for the user to select. I just tested this and it works when the backend recieves the date if you treat it like a python datetime object

from django.forms.widgets import NumberInput

# label and required are both optional arguments  
date_input = forms.DateTimeField(label="Date", required=True, widget=NumberInput(attrs={'type':'date'}))
👤Braxton Goss

0👍

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)

👤Herman Schaaf

0👍

If anyone would be still looking for a neat solution then here’s what I found in the internet:

write in file ‘forms.py’:

from django.forms import DateInput

class DateInput(DateInput):
    input_type = 'date'

class DateForm(Form):
    date = DateField(widget=DateInput)

then simply use the form in your ‘views.py’:

date = DateForm()

You will get such view:
date widget

👤PLR06157

Leave a comment