What's the cleanest, simplest-to-get running datepicker in Django?

Solution 1:

Following is what I do, no external dependencies at all.:

models.py:

from django.db import models


class Promise(models):
    title = models.CharField(max_length=300)
    description = models.TextField(blank=True)
    made_on = models.DateField()

forms.py:

from django import forms
from django.forms import ModelForm

from .models import Promise


class DateInput(forms.DateInput):
    input_type = 'date'


class PromiseForm(ModelForm):

    class Meta:
        model = Promise
        fields = ['title', 'description', 'made_on']
        widgets = {
            'made_on': DateInput(),
        }

my view:

class PromiseCreateView(CreateView):
    model = Promise
    form_class = PromiseForm

And my template:

<form action="" method="post">{% csrf_token %}
    {{ form.as_p }}
    <input type="submit" value="Create" />
</form>

The date picker looks like this:

Solution 2:

Django's TextInput widget (and all of its subclasses) support specifying a type attribute to set the type of form.

You can use this to set the input type to date (W3C specification), for example in the following way :

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

Solution 3:

You can also simply use Jquery in your templates. The jquery DateTime Picker allows each customization.

http://jqueryui.com/demos/datepicker/

Solution 4:

When it comes to date-pickers my choice is Bootstrap Datepicker. You can implement it in your django app by using django-bootstrap-datepicker-plus which works both on newer and older DJango versions. I maintain the repository and tested it working in DJango version 1.8, 1.10, 1.11 and 2.0.4.

The setup is quite easy. You just install it.

  pip install django-bootstrap-datepicker-plus

Import the widget in your forms.py file

    from bootstrap_datepicker_plus import DatePickerInput

Add the widget to your date field

    class ToDoForm(forms.Form):
        date = forms.DateField(
            widget=DatePickerInput(
                options={
                    "format": "mm/dd/yyyy",
                    "autoclose": True
                }
            )
        )

Detailed instructions are available on the django-bootstrap-datepicker-plus Github Page.

Disclaimer: This widget package is now owned and maintained by me. For any issues with it feel free to open issues on the Github Page.

Solution 5:

avi's solution can also be done without using an additional django input class:

class PromiseForm(ModelForm):

    class Meta:
        model = Promise
        fields = ['title', 'description', 'made_on']
        widgets = {
            'made_on': DateInput(attrs={'type': 'date'}),
        }