[Fixed]-Django 1.8 & Django Crispy Forms: Is there a simple, easy way of implementing a Date Picker?


Not an answer for a crispy forms but newer browsers will put in a date picker for you as long as the input has an attribute type of date. This falls into the category of minimal development effort.

date_field = forms.DateField(
        attrs={'type': 'date'} 


django.forms.SelectDateWidget is simple and flexible:

date_field = forms.DateField(
    widget=forms.SelectDateWidget(years, months, empty_label)

It even includes its own template file.


Easy way is override field template 😀

Field('field_name', template='date.html')

Here gist from @maraujop


Simply use widgets feature in forms.py as shown in example below.

class projectForm(forms.ModelForm):
class Meta:
    model = project
    fields = '__all__'
    widgets = {
        'project_text': Textarea(attrs={'cols': 60, 'rows': 10}),
        'report_date': forms.TextInput(attrs={'type': 'date'}),
        'start_date': forms.TextInput(attrs={'type': 'date'}),
        'end_date': forms.TextInput(attrs={'type': 'date'})



My solution is simple and uses the datetimepicker from https://eonasdan.github.io/bootstrap-datetimepicker/.

Include the css file:

<link href="{% static 'css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">

Include the js files:

<script src="{% static 'js/jquery-3.1.1.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/moment-master/min/moment.min.js' %}"></script>
<script src="{% static 'js/bootstrap-datetimepicker.min.js' %}"></script>

Define a css class for the field in the form (works with Crispy too):

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModelo
        fields =       ['a','b','c']

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['a'].widget.attrs['class'] = 'datepicker'

In the template include a JQuery function linking to the css class:

<script type="text/javascript">
$(function () {
        format: 'YYYY-MM-DD HH:mm:ss',
        sideBySide: true

This solution works great with Django 1.10, Crispy Forms and Django Model Forms.

Leave a comment