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

by

42👍

✅

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(
    widget=forms.TextInput(     
        attrs={'type': 'date'} 
    )
)
👤Austin

4👍

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.

👤highpost

2👍

Easy way is override field template 😀

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

Here gist from @maraujop

👤madzohan

2👍

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

    }
👤Shakeel

1👍

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 () {
    $('.datepicker').datetimepicker(
    {
        format: 'YYYY-MM-DD HH:mm:ss',
        sideBySide: true
    }
    );
});
</script>

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

👤José Florencio de Queiroz

Leave a comment