Javascript Django datetimefield未显示新内联表单行的datetimepicker小部件

关于下图，当我单击“添加条目”时，新条目行不再具有datetimepicker小部件。这很奇怪，因为它有正确的类。+1字段表示django表单自动添加的附加字段。这似乎很管用。只有在页面呈现后添加的字段才可能是解决方案的关键

我使用FlatPicker包作为我的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 %}

---

更新了trade\u 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>

//加载文档时，此代码会在具有“datetimefield”类的字段上激活FlatPicker
window.addEventListener(
“DOMContentLoaded”，函数（）{
FlatPicker（“.datetimefield”{
启用时间：对，
enableSeconds：正确，
日期格式：“Y-m-d H:i:S”，
});
}
“添加”，函数（）{
FlatPicker（“.datetimefield”{
启用时间：对，
enableSeconds：正确，
日期格式：“Y-m-d H:i:S”，
});
}
);

添加的

需要放在
django动态表单集
调用中，而不是在
addEventListener
代码中，因为调用是由
django动态表单集
本身完成的

也就是说：（注意：我自己没有测试过，因为我现在正在打电话）


函数ApplyFlatPicker（父级）{
FlatPicker（父级查找（“.datetimefield”）{
启用时间：对，
enableSeconds：正确，
日期格式：“Y-m-d H:i:S”，
});
}
//加载文档时，此代码会在具有“datetimefield”类的字段上激活FlatPicker
addEventListener（“DOMContentLoaded”，function（）{applyFlatpickr（$（document））}）；
$（'.formset_行'）.formset({
addText:“添加条目”，
deleteText:“删除”，
前缀：'entry_set'，
新增：ApplyFlatPicker
});

django dynamic formset
将新创建的行作为jQuery对象传递给添加的
函数，因此通过在参数上使用
.find
，我们可以仅匹配新添加的行，并仅将FlatPicker应用于该新行

从
django动态表单集
文档：

已添加
如果您将其设置为一个函数，则每个函数都将调用该函数
添加新表单的时间。函数应采用单个参数，
行
；它将被传递一个jQuery对象，包装
刚刚添加了。）

很好，这完全有道理，但现在有一个新问题。单击“添加条目”时，已存在的字段将被更新。这里有3张图片概述了这个问题：@AlexWinkler我在回答中更新了这个，所以当点击
添加
按钮时，它不应该清除所有字段；这能解决问题吗？Hey@SimeonJM传奇是的，成功了。与父母相处的有趣方式。我仍然完全搞不懂它为什么会起作用，但我会继续努力去理解它。@AlexWinkler最基本的事情是：
flatpickr
将应用于作为第一个参数传递的任何元素列表。在
DOMContentLoaded
事件中，传入
$（文档）
，并且
parent.find（“.datetimefield”）
将查找页面上具有
datetimefield
类的所有字段。添加新行时，将有效使用
row.find（“.datetimefield”）
（其中
row
是
django dynamic formset
新添加的行）。这意味着
flatpickr
将仅应用于新添加行中具有
datetimefield
类的字段，并且已经存在的行不受影响。
<!-- 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>

<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>