CODEWITHSUNDEEP
djangodjango-forms
MrGlass
MrGlass

Reputation: 9252

Django calendar widget in a custom form

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 custom form.

I found a couple other questions about the same subject here, but they all seemed to be out of date, complicated, and not working.

Is there a way to include Django's built in calendar widget into one of my forms?

Upvotes: 31

Views: 71779

Answers (8)

Asibul Alam
Asibul Alam

Reputation: 1

You can do it easily by using the DateField widget.

example:

birth_date = forms.DateField(widget=forms.DateInput(attrs={'type':'date'}))

Upvotes: 0

PLR06157
PLR06157

Reputation: 11

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

Upvotes: 0

Braxton Goss
Braxton Goss

Reputation: 23

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'}))

Upvotes: 1

rogueleaderr
rogueleaderr

Reputation: 4799

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

Upvotes: 29

davekr
davekr

Reputation: 2276

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.

Upvotes: 12

PBH
PBH

Reputation: 1078

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())

Upvotes: 5

Herman Schaaf
Herman Schaaf

Reputation: 48425

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)

Upvotes: 0

MrGlass
MrGlass

Reputation: 9252

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!

Upvotes: 10

Related Questions