Инструменты календаря django отсутствуют (не отображаются) при загрузке через ajax-вызов

Мне нужно иметь модель change_form, которая будет вызывать "дочернюю форму" при обнаружении изменений в ее поле select.

Это из файла admin.py

class SuratAdmin(admin.ModelAdmin):
  change_form_template = 'surat_form_htmx.html'

admin.site.register(Surat, SuratAdmin)

и это шаблон 'surat_form_htmx.html'

{% extends "admin/change_form.html" %}
{% block after_field_sets %}

  <!--- add htmx -->
  {% load static %}

  <script src="https://unpkg.com/htmx.org@1.6.0"></script>
  <script src="{% url 'js-catlog' %}"></script>
  <!--script src="{% static '/admin/js/core.js' %}"></script-->
  <!--link rel="stylesheet" href="{% static 'admin/css/base.css' %}"-->
  <link rel="stylesheet" href="{% static 'admin/css/widgets.css' %}">
  <script src="{% static '/admin/js/calendar.js' %}"></script>
  <script src="{% static '/admin/js/admin/DateTimeShortcuts.js' %}"></script>
  
  <style>
    /* DivTable.com */
    .divTable{
      display: table;
      width: 100%;
    }
    .divTableRow {
      display: table-row;
    }
    .divTableCell, .divTableHead {
      border: 1px solid #999999;
      display: table-cell;
      padding: 3px 10px;
    }
    .divTableHeading {
      display: table-header-group;
      font-weight: bold;
    }
    .divTableFoot {
      background-color: #EEE;
      display: table-footer-group;
      font-weight: bold;
    }
    .divTableBody {
      display: table-row-group;
    }
  </style>

  <!-- dummy hidden input needed for js -->
  <input id="loaded_object" type="hidden" size="20" readonly {% if not add %} value="{{ original.pk }}" {% endif %}>
  <p>
  <!-- eof ndummy hidden input needed for js -->
  <div id="htmx_get_result">

  </div>
  <!-- evt listener id_template change-->
  <script>
    const selectElement = document.querySelector("#id_template");
    const url_base = "/mst/htmx/child_form";

    selectElement.addEventListener('change', (event) => {
      var template_id = document.getElementById("id_template").value ;
      var surat_id = document.getElementById("loaded_object").value ;
      htmx.ajax('GET', url_base, {target:'#htmx_get_result', swap:'outerHTML'})

    });

</script>
  <!-- EOF evt listener id_template -->

{% endblock %}

вот как это выглядит при первой загрузке.

Я хочу, чтобы при изменении поля 'Template' вызывалось представление, которое загрузит 'дочернюю форму'.

Вот дочерняя форма в файле views.py

from .forms import ChildForm

def child_form_view(request):
  myForm = ChildForm()
  return render(request, 'child_form_template.html', {'form': myForm})

Вот из файла form.py

class ChildForm(forms.Form):
    f_date = forms.DateField(initial=datetime.datetime.now(),
    widget = AdminDateWidget(),
    label= 'Due Date',)

и вот child_form_template.html

<!--
 ref: https://forum.djangoproject.com/t/add-default-datetime-form-widget-in-a-custom-datetime-form/6414/10
-->
<!--{% load static %}-->
<script src="{% url 'js-catlog' %}"></script>
<script src="{% static '/admin/js/core.js' %}"></script>
<!--link rel="stylesheet" href="{% static 'admin/css/base.css' %}"-->
<link rel="stylesheet" href="{% static 'admin/css/widgets.css' %}">
<script src="{% static '/admin/js/calendar.js' %}"></script>
<!--script src="{% static '/admin/js/admin/DateTimeShortcuts.js' %}"></script-->

{{ form.media }}
<fieldset class="module aligned ">
{{ form.as_div }}
</fieldset>

А вот как он выглядит, когда он загружен напрямую один, а не через 'surat_form_htmx.html' modelAdmin

Но вот как это выглядит при загрузке, если изменить поле 'Template' в modelAdmin.

Заметьте, что "инструмент календаря" отсутствует.

Мой вопрос в том, почему 'Calender' отсутствует в child_form, когда она загружается из моего шаблона modelAdmin?
и как это исправить?

Вернуться на верх