django-bootstrap-datepicker-plus: Calendar not showing up in a MODAL Form

Calendar not showing up in a Modal form for the first time. If I close the modal and open it again, calendar starts working.

Here is an error in console log I get:

jquery.min.js:2 Uncaught TypeError: $element.datetimepicker is not a function
    at HTMLInputElement.<anonymous> (<anonymous>:14:38)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at HTMLDocument.<anonymous> (<anonymous>:7:38)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 1
  • Comments: 20

Most upvoted comments

<script src="/static/js/jquery.3.2.1.min.js"></script>
<script src="/static/js/popper.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
 <script src="/static/js/jquery.bootstrap.modal.forms.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

– added to my base.html to be extended in other templates – added the {{ form.media }} in my modal form template where I want my calendar to show before the start of <form> tags

{% block extrahead %}
    {{ form.media }}
    {% load widget_tweaks %}
  {% endblock extrahead %} 
<form method="post" action="">
  {% csrf_token %}
.........modal continues....

–In forms.py

_other imports_
from bootstrap_modal_forms.forms import BSModalModelForm
from bootstrap_datepicker_plus import DatePickerInput, TimePickerInput
class MyForm(BSModalModelForm):
       class Meta:
              model=mymodel
              fields =['name', 'date', 'time']
              widgets = {
                              'date': DatePickerInput(), 
                               'time': TimePickerInput()
                            }

Hope this is what you are looking for and It helps. With this structure a calendar is shown on a Modal form and a timepicker too thanks.

@templargin The only other thing I can suggest without seeing all of your code is that make sure you load {{contact_form.media}} in your base.html and again from your modal template

Hello,

if you add the form as a context processor and load it into your base template it will work fine. The modal needs to load the css and js before it renders the form.

app_name/context_processors.py

from .forms import RequestQuoteForm

def quote_form_processor(request):
 quote_form = RequestQuoteForm()         
 return {'quote_form': quote_form}

settings.py

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [str(BASE_DIR.joinpath("templates"))],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
                "app_name.context_processors.quote_form_processor",
            ],
        },
    },
]

base.html {{quote_form.media}}