CODEWITHSUNDEEP
javascriptdjangodjango-formsdatepickerbootstrap-datepicker
gtopal
gtopal

Reputation: 594

Django-bootstrap-datepicker-plus is not rendering datepicker properly

I am facing with the problem that my datetimepicker is not loading at all.

Just in my template, the datetime field loads the current date and time when i press the calendar icon as the image shows.

enter image description here

Despite following the installation steps from here : https://pypi.org/project/django-bootstrap-datepicker-plus/ and checking other answers in stackoverflow i did not manage to find the solution.

I think the problem has to do with the imports and their priority.

my template

{% extends 'base.html' %}
{% load render_table from django_tables2 %}
{% load bootstrap4 %}       
{% bootstrap_css %}         
{% bootstrap_javascript jquery='full' %}  


{% block page-title %}Creation of Process Note{% endblock %}

{% block content %}

<div class="row">
  <div class="col-md-6 col-xl-6 offset-md-3">

  <form class="well" method="post" action="">
      {% csrf_token %}
    {% bootstrap_form form %}

<br>
        {% buttons %}

          <button type="submit" class="btn btn-primary">
               Submit
          </button>
      {% endbuttons %}

  </form>

{{ form.media }}

</div>
</div>

{% endblock %}

in settings.py

BOOTSTRAP4 = {
    'include_jquery': True,
}

In my base.html the appearence of the imports is:

Inside head

<link href="/static/theme/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="/static/theme/assets/js/jquery.min.js"></script>

...

Inside footer

<script src="/static/theme/assets/js/bootstrap.bundle.min.js"></script>

...

my model

class Case_Notes(models.Model):
    date_created = models.DateTimeField("Creation Date", null=True,blank=True, default=datetime.datetime.now)
    date = models.DateTimeField("Appointment Date", null=True,blank=True)
    notes = models.CharField("Notes",max_length=500, blank=True, null=True)

    def __str__(self):
        return self.notes

my form

class ProcessNotesForm(ModelForm):
    notes= CharField(required=False,widget=Textarea(attrs={"rows":5, "cols":20}))
    class Meta:
        model = Case_Notes
        fields = ("date","notes",)
        widgets = {
            'date': DateTimePickerInput(), # default date-format %m/%d/%Y will be used
        }

Why datepicker widget in the form field is not rendering?

Upvotes: 0

Views: 1638

Answers (2)

ytsejam
ytsejam

Reputation: 3429

Addition to {{ form.media }} you use tuple instead of an array in the fields Meta in the ModelForm:

class ProcessNotesForm(ModelForm):
    notes= CharField(required=False,widget=Textarea(attrs={"rows":5, "cols":20}))
    class Meta:
        model = Case_Notes
        fields = ["date", "notes" ] # change this ("date","notes",)
        widgets = {
            'date': DateTimePickerInput(), # default date-format %m/%d/%Y will be used
        }

Upvotes: -1

MaestroFJP
MaestroFJP

Reputation: 376

According to the documentation, the {{ form.media }} needs to follow right under the {% bootstrap_javascript jquery='full' %} in your template file.

{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{{ form.media }}

Upvotes: 2

Related Questions