Django datetimefield 不显示新内联表单行的 datetimepicker 小部件
Django datetimefield not showing datetimepicker widget for new inline form rows
关于下图,当我单击 "add entry" 时,新的条目行不再有 datetimepicker 小部件。这很奇怪,因为它有正确的 class。 +1 字段代表 django 表单自动添加的附加字段。这似乎工作正常。只有在页面呈现后添加的字段才可能是解决方案的关键。
我正在使用 flatpickr 包作为我的日期时间选择器小部件。
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>
需要放置added
的地方是在django-dynamic-formset
调用中,而不是在addEventListener
代码中,因为调用是由django-dynamic-formset
完成的本身。
即:(注意:我自己还没有测试过,因为我现在在phone)
<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
将新创建的行作为 jQuery 对象传递给 added
函数,因此通过在参数上使用 .find
我们可以仅匹配新添加的行行并将 flatpickr 仅应用于该新行。
来自 django-dynamic-formset
文档:
added
If you set this to a function, that function will be called each
time a new form is added. The function should take a single argument,
row
; it will be passed a jQuery object, wrapping the form that
was just added.)
关于下图,当我单击 "add entry" 时,新的条目行不再有 datetimepicker 小部件。这很奇怪,因为它有正确的 class。 +1 字段代表 django 表单自动添加的附加字段。这似乎工作正常。只有在页面呈现后添加的字段才可能是解决方案的关键。
我正在使用 flatpickr 包作为我的日期时间选择器小部件。
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>
需要放置added
的地方是在django-dynamic-formset
调用中,而不是在addEventListener
代码中,因为调用是由django-dynamic-formset
完成的本身。
即:(注意:我自己还没有测试过,因为我现在在phone)
<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
将新创建的行作为 jQuery 对象传递给 added
函数,因此通过在参数上使用 .find
我们可以仅匹配新添加的行行并将 flatpickr 仅应用于该新行。
来自 django-dynamic-formset
文档:
added
If you set this to a function, that function will be called each time a new form is added. The function should take a single argument,row
; it will be passed a jQuery object, wrapping the form that was just added.)