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]

Symploce

Are you sure your form data is being submitted in the post request? did you check the post data from server? – Teagan

What does your model class look like? – Gordon

@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 – Symploce

Now the problem is much specific, I'll update you soon – Teagan

@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 .. – Symploce

hey @Symploce your ipdb is showing your POST data date-fields are being saved exactly. – Teagan

Hi @MunimMunna the problem was the widget DateInput which I assign in my UserUpdateForm to the creation_date and date_of_birth. I've remove them and the dates in these fields are saved when I entered manually with their respective format. The topic now is implement some calendar date picker such as jqueryui.com/datepicker/#default – Symploce

What css framework are you using? Bootstrap or jquery-ui? – Teagan

@MunimMunna I am using bootstrap 3.7 via bootstrap3 third django application. Is possible that bootstrap and jQueryUI live together? I think so ... – Symploce

@Symploce raw html markup output of the form page, can you add to the project? – Teagan

@MunimMunna Do you want see the whole user_form.html file, all their tags and html structure? – Symploce

Yes, I am having trouble setting up the project, it asks secret_key, aws_bucket_name etc etc – Teagan

Answer 1

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.

Teagan

I follow their suggest and I get this message on together cases: File "/home/bgarcial/.virtualenvs/hostayni/lib/python3.6/site-packages/bootstrap_datepicker/widgets.py", line 87, in __init__ self.options['format'] = self.conv_datetime_format_py2js(format) AttributeError: 'DateInput' object has no attribute 'conv_datetime_format_py2js' – Symploce

I thinks that I am not import the jQuery dependence ? may be .. ? On the other side, I am continue using bootstrap3, this is not excluyent really? Although the error is related to DateInput father class in widgets.py – Symploce

What is the version of Django? – Teagan

My version is Django==1.10.7 – Symploce

@Symploce I am sorry that module install link was wrong, fixed it, install the new module, and add the version 1.10.7 fix I added – Teagan

I have been try setup the Django 1.10.7 version and the calendar is not deployed. I install the package pip install django-bootstrap-datepicker from this guide [this guide] (github.com/pbucher/django-bootstrap-datepicker) and I've add the DateInput class that you refer me. I think so that I am not calling the bootstrap-datepicker js and css files ... django-bootstrap-datepicker` works with the bootstrap-datepicker 1.6.4 and I found these files [here] (github.com/cdnjs/cdnjs/tree/master/ajax/libs/…) but I haven't clear how to include these files – Symploce

Do you have form.media tag in your template head? – Teagan

I haven't this form.media tag ..How to should I put it? – Symploce

@bgarcial, I added the resource checklist to see if everything the widget needs is in place. – Teagan

Munim, I appreciate all your support and effort, But my datepicker is not deployed in my form :( I have taken the audacity to update my original question with my current situation according to your suggestions just in case of you can read it. – Symploce

Answer 2

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.

Kidnap

I didnt get where "media" come from, but it works here! You are right, the django-bootstrap-datepicker-plus documentation is really poor, and the tricks shown there does not work at all. – Marrow

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?

Nicaea