Django form - django-bootstrap-datepicker-plus is not rendering datepicker

Question

I have some inconvenience when I try render django-bootstrap-datepicker-plus widget according to this answer. Everything works fine but the Datepicker does not show up.

My Django version is 1.10.7 and the third party apps I am using are:

• Django Bootstrap 3 (pip install django-bootstrap3)
• Django Bootstrap Datepicker Plus (pip install django-bootstrap-datepicker-plus)

This is my forms.py, I override the DateInput class to customize it according to my needs.

from django import forms
from bootstrap_datepicker.widgets import DatePicker

class DateInput(DatePicker):
    def __init__(self):
        DatePicker.__init__(self,format="%Y-%m-%d")

class UserUpdateForm(forms.ModelForm):
    class Meta:
        widgets = {     
            'date_of_birth': DateInput(),  # datepicker
            'creation_date': DateInput(), # datepicker
        }
        fields = ("other fields", "date_of_birth", "creation_date", "other fields",)
        model = get_user_model()

Then in my template form, I have some base master template named layout.html, My template user_form.html in which I want render the form fields previously mentioned above. All this template have some of divs and html structure as you can see in user_form.html file here.

In bootstrap settings in my settings.py I have to include_jquery option to True

When I go to the form page, the date_of_birth field is not render as a calendar datepicker, this is render as a input type text in which the user should enter the date manually and in a specific format.

In my layout.html I am calling some additionals cdn jQuery resources to another things.

• Is this causing any conflict?
• Why datepicker widget in the form field is not rendering?

[Comments below are way older than this edit]

Answer 1

Try adding these link tags in your base.html template and extending from it to the html template form:

<link href="//cdn.bootcss.com/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>

And add {{ form.media }} into your template form, example:

      <form class="mt-3" action="" method="post">{% csrf_token %}
          {{ form.as_p }}
          {{ form.media }}
          <div class="text-center">
            <input class="btn btn-primary btn-block" type="submit" value="Update" />
          </div>
      </form>

That solved my problem with django-bootstrap-datepicker-plus. That package needs more detailed documentation, simple and with examples. But it works very well once you get to configure it.

Answer 2

You are using django-bootstrap-datepicker-plus which works on DJango version >= 1.8 so it should work perfectly on your project using DJango version 1.10.7. If you have followed everything right as the installation page says you might want to check out the following checklist to see if everything is in place.

Checklist for the widget to work

• jQuery is needed, set include_jquery option to True in Bootstrap settings.
• Make sure you have the following tags included in the head section of your master template.

   {% load bootstrap3 %}       {# imports bootstrap3 #}
   {% bootstrap_css %}         {# Embeds Bootstrap CSS #}
   {% bootstrap_javascript %}  {# Embeds Bootstrap JS #}
   {% block extrahead %}       {# Embeds Extra Resources #}
   {% endblock %}              {# Ends Extra Resources #}

• Check the following tag block is at the top of your form template.

   {% block extrahead %}   {# Extra Resources Start #}
   {{ form.media }}        {# Form required JS and CSS #}
   {% endblock %}          {# Extra Resources End #}

UPDATE: Found the bug

The problem is exactly what you guessed. "In my layout.html I am calling some additional cdn jQuery resources to another things. Is this causing any conflict?"

I went through your layout.html and found 2 jQuery library included, one on line #22, other on line #299, and you said you have include_jquery option set to true. So yes, they are conflicting. The datepicker is binding to the jQuery loaded by bootstrap option include_jquery, and that jQuery is being overridden by the jQuery in line #299.

The Solution:

The solution is to keep only one jQuery in your template. Get rid of all jQuery in your template and only keep include_jquery to true. Or only keep one jQuery in the header of the master template before any other scripts and set include_jquery to false.

Answer 3

If your DATEPICKER rendered without icon and not working any click event, check this out.

1. CHECK SCRIPT ORDER

The problem DATEPICKER NOT RENDERED PROPERLY may caused by script load order. javascript which DATEPICKER needed should be loaded before use it.

For example, if your base template structure is something like below.

<html>
  <head>
    CSS FILES HERE
  </head>
  <body>
    {% block content %}
    AND DATEPICKER FORM CALLED HERE
    {% endblock %}

    SCRIPT FILES HERE(INCLUDE 'JQUERY, BOOTSTRAP, ETC'). <--- SHOULD BE PLACED BEFORE USE DATEPICKER
  </body>
</html>

2. CHECK {{ form.media }}

Did you insert {{ form.media }} before DATEPICKER in the template?