CODEWITHSUNDEEP
djangodatedatetimedatepickerdjango-crispy-forms
StringsOnFire
StringsOnFire

Reputation: 2776

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

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>

Upvotes: 17

Views: 21863

Answers (5)

Shakeel
Shakeel

Reputation: 23

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

    }

Upvotes: 2

highpost
highpost

Reputation: 1323

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.

Upvotes: 4

Jos&#233; Florencio de Queiroz
Jos&#233; Florencio de Queiroz

Reputation: 392

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.

Upvotes: 1

Austin
Austin

Reputation: 4566

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

Upvotes: 43

madzohan
madzohan

Reputation: 11808

Easy way is override field template :D

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

Here gist from @maraujop

Upvotes: 2

Related Questions