Getting console error "Cannot read properties of undefined (reading 'name')" for datepicker-widget.js:185

[aaSertecDev]

I'm trying to use the datepicker widget in a form, but I can't get it to work. The template where the form is used seems to load just fine, but the calendar pop up doesn't show up when I click the input. Checking the browser console gives this error message

Uncaught TypeError: Cannot read properties of undefined (reading 'name') at new WidgetError (datepicker-widget.js:185:70) at handleErrorAndThrow (datepicker-widget.js:202:11) at findAndProcessInputs (datepicker-widget.js:66:9) at datepicker-widget.js:45:22

I followed the Getting started and quick walkthrough guides in the docs, here is my code:

Template:

{%extends 'base.html'%}

{% block headhtml %}
  {% load bootstrap4 %}
  {% bootstrap_css %}
  {% bootstrap_javascript jquery='full' %}
  {{forma.media}}
{% endblock headhtml %}

{%block content%}
<form method="POST" action="{% url 'asistencia' %}">
  {%csrf_token%}
  {%bootstrap_form forma%}
   <br>  
  <button type="submit" class="btn btn-secondary">Enviar</button>
</form>

form:

from django import forms
from bootstrap_datepicker_plus.widgets import DatePickerInput

class FormaFiltros(forms.Form):
    fechaInicio = forms.DateField(required=False, widget=DatePickerInput(options={"format":"dd/mm/yy","autoclose":True}))
    FechaFinal = forms.DateField(required=False, widget=DatePickerInput(options={"format":"dd/mm/yy","autoclose":True}))

I made sure to include bootsrap and datepicker in my installed apps, but I can't get it to work. Any help or pointers are greatly apreciated.

OS = Windows 11 Browser = Chrome Python = 3.11.2 Django = 4.2.2 Bootstrap = 4

[christianwgd]

Please remove the tag "{% load bootstrap4 %}" from the headhtml block and place it directly after the "extends" tag.

Not sure what library you use, seems like https://github.com/zostera/django-bootstrap4. If so, you can refer to https://github.com/monim67/django-bootstrap-datepicker-plus/issues/96 where a similar question is discussed. The sample there is about bootstrap5 but isn't much different from a structural point of view.

[aaSertecDev]

Please remove the tag "{% load bootstrap4 %}" from the headhtml block and place it directly after the "extends" tag.

Not sure what library you use, seems like https://github.com/zostera/django-bootstrap4. If so, you can refer to #96 where a similar question is discussed. The sample there is about bootstrap5 but isn't much different from a structural point of view.

Thanks for the quick response, turns out I was adding an option in my Forms.py file that isn't used in the Docs. I removed the "autoclose" option form the DatePickerInput widget and now it works great. I must have gotten that option from a different tutorial. Thanks for ponting me to the Date Time Picker Sample, it helped a lot!