14
votes

There are an awful lot of date/datetime picker implementations out there. Are there any that integrate with Django and Crispy Forms particularly well, and how are they used?

I'm looking to minimise development effort, maximise simplicity, and make use of Django localisation.

A Django/Crispy standard output for a date field:

<input class="dateinput form-control" id="id_birth_date" name="birth_date" type="text" value="21/07/2015">

In the Model:

birth_date = models.DateField(verbose_name='D.O.B', auto_now_add=False, auto_now=False)

Thanks!

EDIT:

Profile Model:

from django.db import models

class Profile(models.Model):
    birth_date = models.DateField(verbose_name='D.O.B', auto_now_add=False, auto_now=False)

Profile Form:

from django import forms
from profiles.models import Profile


class ProfileForm(forms.ModelForm):
    class Meta:
        model = Profile
        birth_date = forms.DateField(
            widget=forms.TextInput(
                attrs={'type': 'date'}
            )
        )

Profile View:

from django.shortcuts import get_object_or_404
from django.contrib.auth import get_user_model
from profiles.models import Profile
from profiles.forms import ProfileForm

User = get_user_model()

def edit(request):
    profile = get_object_or_404(Profile, user=request.user)
    form = ProfileForm(request.POST or None, request.FILES or None, instance=profile)
    if request.method == 'POST' and form.is_valid():
        form.save()
    context = {
        'form': form,
        'page_title': 'Edit Profile',
    }
    return render(request, 'profiles/edit.html', context)

Profile Edit Template:

<form enctype="multipart/form-data" method="POST" action=".">
    {% csrf_token %}
    {{ form }}
    <input class='btn btn-primary' type="submit" value="Submit" />
</form>
4

4 Answers

35
votes

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

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.

2
votes

Easy way is override field template :D

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

Here gist from @maraujop

1
votes

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.