jquery - How to use the bootstrap-datepicker in Django app?

Question

I want to use the bootstrap-datepicker (https://bootstrap-datepicker.readthedocs.org) in my django application. I use Django 1.7.

In index.html file I have:

<link rel="stylesheet" href="{% static 'my_app/css/bootstrap-theme.min.css' %}">
<link rel="stylesheet" href="{% static 'my_app/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'my_app/js/bootstrap-datepicker.js' %}">
<link rel="stylesheet" href="{% static 'my_app/css/datepicker.css' %}">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(document).ready(function(){
        $('.datepicker').datepicker();
    });
</script>

In my forms.py I have:

class Filter(django_filters.FilterSet):

    class Meta:
        model = MyModel
        fields = ['user', 'date_from', 'date_to']
        widgets = {'date': forms.DateInput(attrs={'class':'datepicker'})}

I my model.py I use to set date:

date_from = models.DateField()
date_to = models.DateField()

When I'm going through the page with the date - does not work in input area.

Answer 1

Update: Warning, this suggestion uses the dateTIMEpicker instead of datepicker. I suggested this because you don't have to use the time functionality of the datetimepicker, so it was quite handy in my case.

Since I have been trying to get datetimepicker to work (in combination with a model form) for quite some time, I thought I would post the solution, that feels like an accumulation of all stackoverflow posts on this topic ;)

So, first of all, make sure to also include moment.js, as it is required by bootstrap-datetimepicker (see this stackoverflow post). The order is important, see the mentioned post.

Then use this site to get the type of datetimepicker you need. If you have no model form in which you want to embed the datetimepicker, you should be fine with just copying that into your html code.

If you want to make one of your model forms field a fancy datepicker (without time) field like I did, then do the following:

base.html

<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/moment-2.4.0.js"></script>
<script type="text/javascript" src="scripts/bootstrap-datetimepicker.js"></script>

forms.py

class MyForm(forms.ModelForm):
    class Meta:
    ...
    widgets = {'myDateField': forms.DateInput(attrs={'id': 'datetimepicker12'})}
    ...

myForm.html:

<div class="row">
    ...
    {% bootstrap_form form %}
    ...
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker12').datetimepicker({
            inline: true,
            sideBySide: true,
            format: 'DD.MM.YYYY' /*remove this line if you want to use time as well */
        });
    });
</script>

I hope I was able to save you some time :)