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

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.

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.