Javascript 在一个页面中对多个django表单使用jQuery datepicker

所以我有一个创建公告表单，然后每个公告都有一个编辑表单，每个表单都有自己的日期选择器。我控制日期选择器的功能是：

$(function() {
    $( ".datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
    });
});

最初我的问题是，在其中一个编辑表单中使用datepicker会更改创建表单中的字段，因为ID是相同的。我通过添加ID（在我的

forms.py

中）解决了这个问题，如下所示：

及

到我的createAnnouncement和EditAnnouncement表单。但由于每页都有多个编辑表单，所以在任何编辑表单上使用datepicker只会更改顶部编辑表单的字段，这仍然是一个问题。我正在使用django小部件调整来呈现我的表单，以便它自动生成HTML、ID、类和所有内容。每个编辑表单都位于具有唯一id的div中，但是表单字段本身在所有表单中的名称都是相同的。有人知道我如何使用django小部件为表单字段生成唯一ID吗？或者可能有一些javascript或者我可以添加到datepicker函数中的东西，告诉datepicker更改同一div中字段的值

编辑：我的模板如下所示：

{% if boardAnnouncements %}
<h3>Announcements</h3>
    <div class="container" style="margin: 0px; padding: 0px;">
        <ul>
            {% for announcement in boardAnnouncements %}
                <div class="row" style="padding-bottom: 10px;">
                <li>
                    <div class="col-md-6">
                        <!-- display announcement content -->
                    </div>
                    <div class="col-md-6">
                        <!-- edit button calls javascript function to hide/unhide div with edit form in it -->
                        <a href="javascript:unhide_announcement('editann-{{announcement.id}}', '{{announcement.id}}')" class="btn btn-primary" style="margin-left: 10px;"><i class="fa fa-pencil" aria-hidden="true"></i> Edit</a>
                    </div>
                </div>
                <!-- each div gets unique id that corresponds to announcemt id -->
                <div id="editann-{{announcement.id}}" class="hidden">
                    <form role="form" action="/editannouncement/{{announcement.id}}/" method="post">
                            <!-- display edit form with django widget tweaks -->
                            {% csrf_token %}
                            {% for field in editAnnouncement %}
                                {% if field.errors %}
                                    <div class="form-group has-error">
                                        <label class="col-sm-2 control-label" for="id_{{ field.name }}">
                                        {{ field.label }}</label>
                                        <div class="col-sm-10">
                                            {{ field }}
                                            <span class="help-block">
                                            {% for error in  field.errors %}
                                                {{ error }}
                                            {% endfor %}
                                            </span>
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
                                        <div class="col-sm-10">
                                            {{ field }}
                                            {% if field.help_text %}
                                                <p class="help-block"><small>{{ field.help_text }}</small></p>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
                                    </div>
                                </div>
                            </form>
                </li>
                </div>
            {% endfor %} 
        </ul>
    </div>  
    {% endif %}
<div>

<a href="javascript:unhide_announcement('editann-{{announcement.id}}', '{{announcement.id}}')" class="btn btn-primary">Edit</a>
<div id="editann-{{announcement.id}}" class="hidden">
    <!-- edit announcement form -->
    <form>
        ...
    </form>
</div>

{%if%}
公告

{%用于BoardAnnounces%中的公告}

{%csrf_令牌%}
{editAnnouncement%中字段的%s}
{%if field.errors%}
{{field.label}
{{field}}
{%字段中有错误。错误%}
{{error}}
{%endfor%}
{%else%}
{{field.label}
{{field}}
{%if field.help_text%}
{{field.help\u text}
{%endif%}
{%endif%}
{%endfor%}
保存



{%endfor%}

{%endif%}

编辑表单生成的HTML为：

<div id="editann-1" class="unhidden">
    <form class="ng-pristine ng-valid" role="form" action="/editannouncement/1/" method="post">
        <input name="csrfmiddlewaretoken" value="AbTEZYmK1RF9yeom1C34IFFCj3EBrOD3" type="hidden">
        <div class="form-group">
            <label class="col-sm-2 control-label" for="id_description">Edit Description</label>
            <div class="col-sm-10">
                <textarea class="form-control" cols="40" id="id_description" name="description" rows="10"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="id_end_date">Expires</label>
            <div class="col-sm-10">
                <input class="datepicker form-control hasDatepicker" id="end_date_edit" name="end_date" type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
            </div>
        </div>
    </form>
</div>
<div id="editann-2" class="unhidden">
    <form class="ng-pristine ng-valid" role="form" action="/editannouncement/2/" method="post">
        <input name="csrfmiddlewaretoken" value="AbTEZYmK1RF9yeom1C34IFFCj3EBrOD3" type="hidden">
        <div class="form-group">
            <label class="col-sm-2 control-label" for="id_description">Edit Description</label>
            <div class="col-sm-10">
                <textarea class="form-control" cols="40" id="id_description" name="description" rows="10"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="id_end_date">Expires</label>
            <div class="col-sm-10">
                <input class="datepicker form-control hasDatepicker" id="end_date_edit" name="end_date" type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
            </div>
        </div>
    </form>
</div>

编辑说明
到期
保存


编辑说明
到期
保存

---

因此，为了澄清每个editann-#div中都有一个编辑表单（每个编辑表单都有一个日期选择器）。现在，由于所有编辑表单“Expire”字段都有id

id\u end\u date

datepicker会更改第一个编辑表单的值，无论我使用的是哪个datepicker

一页上不应该有两个相同的

id

。这就是造成错误的原因

若要在页面上添加多个表单，您应该使用，这将自动确保您的id是唯一的

通过从代码中删除

id

属性，我可以使日期选择器工作。看

---

请注意，我必须从粘贴的html中删除

hasDatepicker

类，因为它实际上是由

datepicker

函数插入的-如果将其保留在其中，则会产生冲突，并且日期选择器不会显示。

我提出了一个涉及一些javascript和jQuery的解决方案

function unhide_announcement(divID, ID) {
var item = document.getElementById(divID);
if (item) {
    /* hide/unhide div */
    item.className=(item.className=='hidden')?'unhidden':'hidden';
    /* give each end_date field a unique ID */
    var newID = 'id_end_date' + ID;
    item.querySelector('#id_end_date').id = newID;
    /* datepicker functionality */
    $(function() {                                                    
        $( '#'+newID ).datepicker({
          changeMonth: true,
          changeYear: true,
        });
      })
    }
}

由于每个编辑公告表单都位于一个唯一的div中，因此我首先获取该div，然后在div中只有一个编辑公告表单，因此我将该id从

id\u end\u date

更改为

id\u end\u date1

或与其关联的任何公告id。然后我改变了jQuery datepicker函数，我必须按id而不是按类来选择它，它成功了。因此，当我在模板中调用它时，它如下所示：

{% if boardAnnouncements %}
<h3>Announcements</h3>
    <div class="container" style="margin: 0px; padding: 0px;">
        <ul>
            {% for announcement in boardAnnouncements %}
                <div class="row" style="padding-bottom: 10px;">
                <li>
                    <div class="col-md-6">
                        <!-- display announcement content -->
                    </div>
                    <div class="col-md-6">
                        <!-- edit button calls javascript function to hide/unhide div with edit form in it -->
                        <a href="javascript:unhide_announcement('editann-{{announcement.id}}', '{{announcement.id}}')" class="btn btn-primary" style="margin-left: 10px;"><i class="fa fa-pencil" aria-hidden="true"></i> Edit</a>
                    </div>
                </div>
                <!-- each div gets unique id that corresponds to announcemt id -->
                <div id="editann-{{announcement.id}}" class="hidden">
                    <form role="form" action="/editannouncement/{{announcement.id}}/" method="post">
                            <!-- display edit form with django widget tweaks -->
                            {% csrf_token %}
                            {% for field in editAnnouncement %}
                                {% if field.errors %}
                                    <div class="form-group has-error">
                                        <label class="col-sm-2 control-label" for="id_{{ field.name }}">
                                        {{ field.label }}</label>
                                        <div class="col-sm-10">
                                            {{ field }}
                                            <span class="help-block">
                                            {% for error in  field.errors %}
                                                {{ error }}
                                            {% endfor %}
                                            </span>
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
                                        <div class="col-sm-10">
                                            {{ field }}
                                            {% if field.help_text %}
                                                <p class="help-block"><small>{{ field.help_text }}</small></p>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" name="edit_announcement" class="btn btn-primary">Save</button><br><br>
                                    </div>
                                </div>
                            </form>
                </li>
                </div>
            {% endfor %} 
        </ul>
    </div>  
    {% endif %}
<div>

<a href="javascript:unhide_announcement('editann-{{announcement.id}}', '{{announcement.id}}')" class="btn btn-primary">Edit</a>
<div id="editann-{{announcement.id}}" class="hidden">
    <!-- edit announcement form -->
    <form>
        ...
    </form>
</div>

...

确切的问题是什么？显示呈现的html以及希望应用datepicker js和不希望应用datepicker js的表单部分。@YPCrumble我已经添加了模板代码并生成了html，这有助于澄清问题吗？期望的结果是什么？您希望第二个“Expires”字段成为日期选择器，而不是第一个？还是别的什么？很抱歉，在理解实际问题时仍然有困难。没有。因此，当我单击文本输入区域时，每个表单都会显示日期选择器（这正是我想要的），但当我选择日期时，我的日期选择器函数fil