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

11
votes

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:

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]

3
javascriptdjangodatepickerdjango-formsbootstrap-datepicker
Are you sure your form data is being submitted in the post request? did you check the post data from server? – Munim Munna
What does your model class look like? – approxiblue
@MunimMunna the data are submitted in the POST request, according to the last modification that I have to the situation. Only does not save the dates field which I reference in the question – bgarcial
Now the problem is much specific, I'll update you soon – Munim Munna
@MunimMunna thanks, is possible that my inconvenient is in the way of I declare the form widget to creation_date and date_of_birth fields. ? Just in case, I am using a DJango widget for that .. – bgarcial

3 Answers

6
votes

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.

4
votes

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.

0
votes

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?