Date-time Picker not open but after reopen modal it runs smooth

[write4alive]

When I run my app there's no error, but when I press button to open form with modal it opens and I get an error Uncaught TypeError: $element.datetimepicker is not a function, then I close modal and open it again now there's no error and its running, I can choose date and time too with no problem, I can use datetime picker. I should able to pick date time, anytime I open that modal.

I dont have any error on my Django console, I got a JS error in browser console:

    Uncaught TypeError: $element.datetimepicker is not a function
    at HTMLInputElement.<anonymous> (<anonymous>:14:38)
    at Function.each (VM2470 jquery.js:354)
    at jQuery.fn.init.each (VM2470 jquery.js:189)
    at HTMLDocument.<anonymous> (<anonymous>:7:38)
    at mightThrow (VM2470 jquery.js:3534)
    at process (VM2470 jquery.js:3602)

settings.py

INSTALLED_APPS = [
    'bootstrap4',
    'bootstrap_datepicker_plus',

BOOTSTRAP4 = {
    'include_jquery': True,
}

MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media')
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

MEDIA_URL = '/media/'
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(PROJECT_DIR, "/dysporject/dysapp/static"),
)

view.py

@login_required()
def appcal_create(request):
    if request.method == 'POST':
        form = EventForm(request.POST)
    else:
        form = EventForm()
    return save_event_form(request, form,  'appointmentcal_create_partial.html')

@login_required()
def save_event_form(request, form, template_name):
    data = dict()
    if request.method == 'POST':
        if form.is_valid():
            obj = form.save(commit=False)
            obj.tenantid = request.user.tenantid
            form.save()
            data['form_is_valid'] = True
            events = CalanderEvents.objects.filter(
                tenantid=request.user.tenantid).values()
            data['html_appointmentcal_list'] = render_to_string('appointmentcal_list_partial.html', {
                'events': events
            })
        else:
            data['form_is_valid'] = False
    context = {'form': form}
    data['html_form'] = render_to_string(
        template_name, context, request=request)
    return JsonResponse(data)

forms.py

from bootstrap_datepicker_plus import DatePickerInput, DateTimePickerInput
from django import forms
from django.contrib.auth.forms import UserCreationForm
from .models import Customer, User, CalanderEvents

class EventForm(forms.ModelForm):
    class Meta:
        model = CalanderEvents
        fields = ('id', 'customer', 'title', 'start', 'end')
        widgets = {
            'start': DateTimePickerInput(),
            'end': DateTimePickerInput(),
        }

list.html

{% extends 'ltebase.html' %}

{% load staticfiles  %}
{% block title %}Cutomer Appointments{% endblock %}

{% block content %}
    <section class="content-header">

    </section>
    <button type="button" class="btn btn-primary js-create-events" data-url="{% url 'appcal_create' %}">
      <span class="glyphicon glyphicon-plus"></span>
New    </button>

list_partial_form

{% load widget_tweaks %}

{% load staticfiles  %}

{% for field in form %}
  <div class="form-group{% if field.errors %} has-error{% endif %}">
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
    {% render_field field class="form-control" %}
    {% for error in field.errors %}
      <p class="help-block">{{ error }}</p>
    {% endfor %}
  </div>
{% endfor %}

list_partial_create.html

{% load widget_tweaks %}

{% load staticfiles  %}

<form method="post" action="{% url 'appcal_create' %}" class="js-event-create-form">
  {% csrf_token %}
   {{ form.media }}
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Create a new Event</h4>
  </div>
  <div class="modal-body">
    {% for field in form %}
      <div class="form-group{% if field.errors %} has-error{% endif %}">
        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        {% render_field field class="form-control" %}
        {% for error in field.errors %}
          <p class="help-block">{{ error }}</p>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Create Event</button>
  </div>
</form>

ltebase.html: JS library order:

  <script src="{% static 'bower_components/jquery/dist/jquery.js' %}"></script>

  <script src="{% static 'bower_components/jquery-ui/jquery-ui.js' %}"></script>

  <script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>

  <script src="{% static 'bower_components/moment/moment.js' %}"></script>

  <script src="{% static 'bower_components/jquery-slimscroll/jquery.slimscroll.min.js' %}">/script>

  <script src="{% static 'bower_components/fastclick/lib/fastclick.js' %}"></script>

  <script src="{% static 'dist/js/adminlte.min.js' %}"></script>

  <script src="{% static 'bower_components/fullcalendar/dist/fullcalendar.js' %}"></script>

  <script src="{% static 'bower_components/fullcalendar/dist/locale/tr.js' %}"></script>

  <script src="{% static 'js/customer.js' %}"></script>

  <script src="{% static 'js/appointmentcal.js' %}"></script>

Setup Information

• OS: [Windows 10]
• Browser [ chrome]
• Browser version [ 73.036]
• Python version [3.7]
• Django version [2.1.1]
• Bootstrap version [4]
• jQuery version [3.1.1]

[x] I have followed the configuration instructions and checked out the common error troubleshooting page.

[monim67]

Cannot reproduce the error, does calendar work as expected even if there's error in console?

[write4alive]

first time I open it there's an error but when I close modal and open again theres no new error and calander works fine with no problem.

First time run , console error ;

https://hizliresim.com/XMAkRk

[monim67]

Is your problem resolved? If yes, can you post what was the issue?

[write4alive]

I call modal page with generated form objects but the problem is about loading of needed js and css file order. I manually add js and css files to my master template and it solves the problem. Modal Form requires needed files before generating form fields.

[templargin]

I call modal page with generated form objects but the problem is about loading of needed js and css file order. I manually add js and css files to my master template and it solves the problem. Modal Form requires needed files before generating form fields.

Can you elaborate on this? I’m running into the same issue. I have a base.html with all JS and CSS, and a page with modal page that extends base.html.

Thank you in advance!