[Solved]-Django form – django-bootstrap-datepicker-plus is not rendering datepicker

by

4👍

✅

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.

👤Munim Munna

6👍

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.

👤nilsoviani

0👍

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?

👤Tony

Leave a comment