Django поле datetime не отображает виджет datetimepicker для новых строк встроенной формы

Question

Что касается изображения ниже, когда я нажимаю «добавить запись», новая строка записи больше не имеет виджет datetimepicker. Что странно, потому что у него правильный класс. Поле +1 представляет собой дополнительное поле формы django. Который, кажется, работает нормально. Только поля, которые добавляются после отображения страницы, могут быть ключом к решению.

Я использую пакет flatpickr в качестве моего виджета datetimepicker.

trade_form. html

{% extends 'dashboard/base.html' %}
{% load static %}

{% block content %}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'js/formset/jquery.formset.js' %}"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-3">
    <h2>New Trade</h2>
</div>

<div class="row">
    <div class="col">
        <form action="" method="post">{% csrf_token %}
            {{ form.media }}
            {{ form.as_p }}

            <table class="table">
                {{ entries.management_form }}

                {% for form in entries.forms %}
                {% if forloop.first %}
                <thead>
                <tr>
                    {% for field in form.visible_fields %}
                    <th>{{ field.label|capfirst }}</th>
                    {% endfor %}
                </tr>
                </thead>
                {% endif %}
                <tr class="{% cycle row1 row2 %} formset_row">
                    {% for field in form.visible_fields %}
                    <td>
                        {# Include the hidden fields in the form #}
                        {% if forloop.first %}
                        {% for hidden in form.hidden_fields %}
                        {{ hidden }}
                        {% endfor %}
                        {% endif %}
                        {{ field.errors.as_ul }}
                        {{ field }}
                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </table>
            <input type="submit" value="Save"/> <a href="{% url 'trade-list' %}">back to the list</a>
        </form>
    </div>


</div>

<script type="text/javascript">
    $('.formset_row').formset({
        addText: 'add entry',
        deleteText: 'remove',
        prefix: 'entry_set'
    });

</script>

<!-- Makes DateTimeFields Show Picker-->
<script>
    // This code activates flatpickr on fields with the 'datetimefield' class when the document has loaded
    window.addEventListener("DOMContentLoaded", function () {
        flatpickr(".datetimefield", {
            enableTime: true,
            enableSeconds: true,
            dateFormat: "Y-m-d H:i:S",
        });
    });
</script>

{% endblock content %}

forms.py

class EntriesForm(ModelForm):
    class Meta:
        model = Entry
        exclude = ()
        widgets = {
            'date': forms.DateTimeInput(format='%Y-%m-%d %H:%M:%S', attrs={'class': 'datetimefield'}),
        }

    # Adding default class to every visible field 

    def __init__(self, *args, **kwargs):
        super(EntriesForm, self).__init__(*args, **kwargs)
        for field_name, field in self.fields.items():
            if field.widget.attrs.get('class'):
                field.widget.attrs['class'] += ' form-control'
            else:
                field.widget.attrs['class'] = 'form-control'

EntriesFormSet = inlineformset_factory(Trade, Entry, form=EntriesForm, extra=1)

---

Обновлены скрипты trade_form. html, но безуспешно. Пока этот код только что удалил виджет datetimepicker для полей, которые уже работали. Так что это может быть просто проблема формата.

<!-- Makes DateTimeFields Show Picker-->
<script>
    // This code activates flatpickr on fields with the 'datetimefield' class when the document has loaded
    window.addEventListener(

        "DOMContentLoaded", function () {
            flatpickr(".datetimefield", {
                enableTime: true,
                enableSeconds: true,
                dateFormat: "Y-m-d H:i:S",
            });
        }

        "added", function() {
            flatpickr(".datetimefield", {
                enableTime: true,
                enableSeconds: true,
                dateFormat: "Y-m-d H:i:S",
            });

        }

    );
</script>

Answer 1

Место, куда нужно поместить added, находится в вызове django-dynamic-formset, а не в коде addEventListener, поскольку вызов выполняется самим django-dynamic-formset.

То есть : (примечание: я не проверял это сам, потому что сейчас разговариваю по телефону)

<script type="text/javascript">

    function applyFlatpickr(parent) {
     flatpickr(parent.find(".datetimefield"), {
                enableTime: true,
                enableSeconds: true,
                dateFormat: "Y-m-d H:i:S",
            });
    }
    <!-- Makes DateTimeFields Show Picker-->
        // This code activates flatpickr on fields with the 'datetimefield' class when the document has loaded
        window.addEventListener("DOMContentLoaded", function(){applyFlatpickr($(document))});

        $('.formset_row').formset({
            addText: 'add entry',
            deleteText: 'remove',
            prefix: 'entry_set',
            added: applyFlatpickr
        });
    </script>
</script>

django-dynamic-formset передает вновь созданную строку в функцию added как объект jQuery поэтому, используя .find в качестве аргумента, мы можем сопоставить только недавно добавленную строку и применить flatpickr только к этой новой строке.

Из документов django-dynamic-formset:

added Если вы установите это для функции, эта функция будет вызываться каждый раз, когда добавляется новая форма. Функция должна принимать один аргумент, row; ему будет передан объект jQuery, оборачивающий только что добавленную форму.)