Getting console error "Cannot read properties of undefined (reading 'name')" for datepicker-widget.js:185
aaSertecDev opened this issue · comments
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
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.
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!