Calendar not showing up in a MODAL Form

[templargin]

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)

[jtangir87]

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}}

[templargin]

@jtangir87 Thank you for suggestion, but this still did not work.

Form

class CreateContactFormModal(BSModalModelForm):
    description = forms.CharField(
        label=_('Description'),
        widget=forms.Textarea(
            attrs={'rows': 5}
        ),
        required = False,
    )

    class Meta:
        model = Contact
        fields = [
            'first_name', 'last_name', 'email',
            'phone', 'job_title', 'website', 'company', 'address', 'birthday','description'
        ]
        widgets = {
             'birthday': DatePickerInput(), # default date-format %m/%d/%Y will be used
        }

context_processors.py

from .forms import CreateContactFormModal

def contact_form_processor(request):
     contact_form = CreateContactFormModal()
     return {'contact_form': contact_form}

Added this to settings contacts.context_processors.contact_form_processor and added {{contact_form.media}} to base.html

[jtangir87]

@templargin

In your context processor return {‘contact_form’:contact_form}

I think you just missed updating that from your copy and paste from my code. You don’t have a quote_form

[templargin]

@jtangir87 I posted the wrong code, apologies. Edited. By 'still did not work' I meant javascript error is gone, but the field is rendered as a regular text field, calendar widget does not show up.

[jtangir87]

@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

[templargin]

@jtangir87 I am having the same issue with flatpickr, but I think the root cause of the problem is the same. I do think the problem comes from jquery conflict somehow (there is a modal package with jquery I'm using). I've created a special repo to demonstrate the issue: https://github.com/templargin/datepicker. If you get a chance, I'd really appreciate your comments - been struggling on this fo quite some time!

[scambrayj]

@templargin Is there any update to this issue? I am having the same problem. On first load, it does not work. After closing the modal and then reopening, it does work. Then after form modal submission and page reload, it does not work again unless you close and reopen the modal.

jquery-3.5.1.min.js:2 Uncaught TypeError: $element.datetimepicker is not a function error thrown in console.

[jtangir87]

I have been meaning to write a blog post about how I resolved the issue. Try my Django Bootstrap Datepicker In Modal Tutorial

[templargin]

@scambrayj Not really. I tried so many different things but stopped looking for a solution for a moment. My problem is that I need to use the django-bootstrap-modal-forms package because many of my code components are tied to it. But because I spent so much time trying to fix this issue I almost thought to drop the package and rewrite all the code :)

@jtangir87 Thank you for the write up, nice blog post. I tried to implement your method for my case but it did not work. Because I additionally use modal form package mentioned above, I believe there is interference between context processor and resulting form. When trying to return {"contact_form":contact_form} in context_processor.py I get 'dict' object is not callable error. I created this repo specifically to demonstrate my issue. Please let me know your thoughts if you get a chance to have a look at it!

[scambrayj]

@templargin sorry for the troubles. I am also depending on django-bootstrap-modal-forms. I ended up switching calendar functionality to bootstrap-datepicker.

https://bootstrap-datepicker.readthedocs.io/en/latest/

About 5 to 10 min I got it working with the modals perfect. No problems since. If there is no other solution for this package, I recommend that one with django-bootstrap-modal-forms.

[templargin]

@scambrayj Thank you for the tip! I'll try it out. Do you mind if I reach out to you on a side in case I run into any issues (not to pollute this thread)?

[scambrayj]

@templargin sure thing

[Ishma59]

@templargin had the same error on modal forms but added the the
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
which got the error sorted. Also check out this https://stackoverflow.com/questions/21459730/error-with-bootstrap-3-date-time-picker

[sommelon]

@Ishma59 where did you add it?

[Ishma59]

<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.

[sommelon]

@Ishma59 thank you, that solved it. The placement of {{form.media}} doesn't seem to have an effect in my case. I tried to place it inside or outside, before or after the <form> and it still works.
Thanks once again.

[Ishma59]

Happy it worked

[rez0n]

@jtangir87 Thank you for your reply, it is very helpful.

[itonohito]

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.

Thank you very much, it solved same issue for me too and saved my day. :)

[carlberube]

@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

This was exactly the issue with mine -- I needed to include 'form.media' in both the base and the modal forms HTMLs.