jQuery ui datepicker 未在内联 django formset 中显示

Question

在正常形式的 jquery datepicker 工作正常。当我将子表单动态添加到父表单时，日期选择器未显示并且在子表单的日期字段中不起作用。这是我的孩子模型：

class Children(models.Model):
    person = models.ForeignKey(Person, on_delete=models.CASCADE)
    child_name = models.CharField(max_length=150, blank=False)
    slug = AutoSlugField(populate_from='name')
    child_birth_date = models.DateField(null=True, blank=True)
    blood_group = models.CharField(max_length=5, blank=True)

这是我的表格：

class ChildrenForm(ModelForm):
    child_birth_date = forms.DateField(('%d/%m/%Y',), label='Birth Date', required=True,
                                   widget=forms.DateInput(format='%d/%m/%Y', attrs={
                                       'class': 'input',
                                       'size': '15'
                                   })
                                   )
    class Meta:
        model = Children
        fields = '__all__'

    def __init__(self, *args, **kwargs):
        super(ChildrenForm, self).__init__(*args, **kwargs)
        self.fields['child_birth_date'].widget.attrs['placeholder'] = 'format:mm/dd/yyyy'

PersonFormSet = inlineformset_factory(Person, Children, extra=0, min_num=1, fields=('child_name', 'child_birth_date','blood_group' ))

这是我的脚本：

<script type="text/html" id="children-template">
            <div id="children-__prefix__">
                {{ formset.empty_form }}
            </div>
        </script>

$(function() {
        $('.add-children').click(function(ev){
            ev.preventDefault();
            var count = parseInt($('#id_children_set-TOTAL_FORMS').attr('value'), 10);
            var tmplMarkup = $('#children-template').html();
            var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count)
            console.log(compiledTmpl);
            $('div.children').append(compiledTmpl);
            $('#id_children_set-TOTAL_FORMS').attr('value', count + 1);
            $('#id_child_birth_date').datepicker();
            $('#id_child_birth_date').datepicker('show');
        });
    });

我的表单.html：

<form action="." method="post" enctype="multipart/form-data">
                        {{ formset.management_form }}
                        {% csrf_token %}

                        <legend>Person</legend>
                        <div class="event">
                        {{ form|crispy}}
                        </div>    
                        <legend>
                            <div class="pull-right"><a class="btn btn-inverse add-children" href="#" ><i class="icon-plus icon-white"></i> Add Children</a></div>
                        Children Information
                        </legend>
                        <div class="children form-inline">
                            {% for form in formset %}
                                {{ form|crispy }}
                            {% endfor %}

                        </div>
                      <div class="form-actions">
                         <button type="submit" class="btn btn-primary">Save</button>
                       </div>
                     </form>

即使是子表单字段也没有显示占位符或更改其标签。我该如何解决这个问题？

Answer 1

看起来您每次都在同一个元素 (#id_child_birth_date) 上调用 .datepicker。在添加孩子时查看表单，每个表单都应该有一个前缀，使得每个 child_birth_date 输入字段的 id 类似于#id_0-child_birth_date、#id_1-child_birth_date 等。

$('#id_child_birth_date').datepicker(); 应该是 $('#id_' + count + '-child_birth_date').datepicker(); 或类似的东西。