Django with bootstrap DateTimePicker: inputElement.dataset is undefined - django

Question

When I try to add options to dateTimePicker it stops working. Website raise "Something went wrong! Check browser console for errors. This message is only visible when DEBUG=True", and when I enter the console on the browser I see this:
Uncaught TypeError: inputElement.dataset is undefined
and the error picks up from https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css
in the datapicker-widget.js file
class Topic(models.Model):
speaker = models.ForeignKey(Profile, on_delete=models.SET(GUEST_ID))
seminar = models.ForeignKey(Seminar, on_delete=models.CASCADE)
title = models.CharField(max_length=200)
description = models.TextField(default='')
speaker_name = models.CharField(max_length=200, default='')
date = models.DateTimeField(null=True, blank=True)
def __str__(self):
return self.title
class TopicCreateView(LoginRequiredMixin, CreateView):
model = Topic
form_class = TopicPageForm
template_name = 'seminar/topic_form.html'
def get_initial(self, *args, **kwargs):
initial = super(TopicCreateView, self).get_initial(**kwargs)
initial = initial.copy()
initial['speaker'] = self.request.user.profile
initial['speaker_name'] = self.request.user
initial['date'] = datetime.datetime.now()
return initial
...
`
{% extends "seminar/base.html" %}
{% load django_bootstrap5 %}
{% load crispy_forms_tags %}
{% block head_content %}
{% endblock %}
{% block content %}
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Topic</legend>
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Save</button>
</div>
</form>
</div>
{% endblock content %}
head
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type='text/css' href="{% static 'users/style.css' %}">
<link rel="stylesheet" type='text/css' href="{% static 'seminar/main.css' %}">
bottom body
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
{{ form.media }}
As long as it doesn't add defaultDate in the options it doesn't display the error. The same is true if I want to add autoclose and many other options. (what type i should use in attrs?)
class TopicPageForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(TopicPageForm, self).__init__(*args, **kwargs)
class Meta:
model = Topic
fields = ['speaker', 'title', 'description', 'date', 'speaker_name']
template_name = 'seminar/topic_form.html'
widgets = {
'date': DateTimePickerInput(
attrs={'class': 'form-control input-sm', 'type': 'dataTime'},
options={
"format": "YYYY/MM/DD HH/mm", # moment date-time format
'defaultDate': True,
},
)
}
How to use other options?